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
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

  • By
    “Top” Watermark Using MooTools

    Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is...

  • By
    MooTools PulseFade Plugin

    I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery. The MooTools JavaScript Options of the class include: min: (defaults to .5) the...

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!