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
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

Incredible Demos

  • By
    jQuery Wookmark

    The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should."  Basic web users probably think nothing of it but as a developer, I can appreciate the...

  • By
    Use Custom Missing Image Graphics Using MooTools

    Missing images on your website can make you or your business look completely amateur. Unfortunately sometimes an image gets deleted or corrupted without your knowledge. You'd agree with me that IE's default "red x" icon looks awful, so why not use your own missing image graphic? The MooTools JavaScript Note that...

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!