Shorten Your CSS Selectors With The :is Pseudo-Class

#css #performance

One CSS feature I wish I knew about long before I discovered it is the :is pseudo-class.

You can use it to shorten some of your longer selectors.

For example, consider the following declaration block:

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    /* some styles would go here */
}

Seems a bit repetitive, right?

Now, here's how our code would expand if we wanted to add a class to each <a> tag:

h1 a.class, h2 a.class, h3 a.class, h4 a.class, h5 a.class, h5 a.class {
    /* some styles would go here */
}

We'd have to re-type ".class" six times.

And this is just one small example of how the :is selector can save you some keystrokes:

:is(h1, h2, h3, h4, h5, h6) a {
    /* some styles would go here */
}

In this case, if we wanted to add that same class from earlier, we'd just have to type it once, instead of six times:

:is(h1, h2, h3, h4, h5, h6) a.class {
    /* some styles would go here */
}

So basically, all it does is iterate over each comma-separated internal selector and apply it to the sibling or child selector.

Performance implications

One important thing to remember about CSS is that subtle differences in selector syntax can carry exponential impact on performance.

For example, "div > p" is far less performant than "div p", because browers interpret selectors from right to left. While this is something I might write about more in the future, it's beyond the scope of this post.

So as far as the :is selector goes, I just want to note that pseudo-classes (including :is) are the most inefficient selector type.

Also, the browser compatibility could be improved. I'd strongly suggest looking into some backwards-compatible pseudo-classes with the same functionality, such as ":matches()".