Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

CSS :is

By  on  

There are scores of developers who hate CSS; don't get it, don't want to get it, etc. Most of that is either down to inefficiencies within the language or misunderstanding of how to properly construct a website structure. I mostly love CSS but there are some parts of the language that I always hated, like having to repeat very similar selectors. That's why I was so happy when I saw CSS :is ; a method of avoid duplication within your selector structure!

You all remember this mindless CSS repetition:

section h1,
section h2, 
section h3,
article h1,
article h2,
article h3 {
  /* styles here */
}

I always loathed having to do that -- lots of maintenance cost and bloated CSS files. This is where :is comes to the rescue:

:is(section, article) :is(h1, h2, h3) {
  /* styles here */
}

is: is a perfect summary of how a tiny addition to the CSS language can make a developer's life just a bit easier!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

Discussion

  1. Rahul Kumar

    There is two important facts about :is() :-

    1. If one/more selectors passed in it, are invalid then parser will still parse the entire code and apply the mentioned styles to other selectors except the invalid ones.

    2. It does not work with pseudo elements.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!