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

Incredible Demos

  • By
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

  • By
    Using MooTools For Opacity

    Although it's possible to achieve opacity using CSS, the hacks involved aren't pretty. If you're using the MooTools JavaScript library, opacity is as easy as using an element's "set" method. The following MooTools snippet takes every image with the "opacity" class and sets...

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!