:is() and :where() CSS pseudo classes

UPDATE: As of June 2021, Firefox, Chrome and Safari ship this selector. Can be enabled via a flag in Edge and Opera.

At the time of writing, these are not shipped in any browser outside of Firefox 77+.

To check compatibility, check Can I Use.

You can use :is() today with the help of the following PostCSS plugin.

CSS selectors are really powerful and they are about to get even more so with the introduction of two pseudo-classes: :is() and :where().

These pseudo-class functions could aid in writing more compact CSS. Here's a quick example:

section a,
ul a {
  font-size: 20px;
}

// is equivalent to

:is(section, ul) a {
  font-size: 20px;
}

Well this sure makes things a lot simpler! Let's look at another example:

ol ol li,
ol ul li,
ul ol li,
ul ul li {
  font-size: 20px;
}

// is equivalent to

:is(ol, ul) :is(ol, ul) li {
  font-size: 20px;
}

You can see that this is quite awesome! But what about the :where() pseudo-class function?

This is where it gets a bit tricky, :where() is the same as :is() except it has a specificity of zero.

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.

Let's look at some examples of how :where() applies using the following HTML:

<div class="outer">
  <p>This is some outer text</p>
  <div class="inner">
    <p>This is the inner text</p>
  </div>
</div>

Now for the CSS bit:

div:where(.outer) p {
  color: red;
}

div p {
  color: black;
}

We would expect the outer text to be red. But it's not. This is because both selectors have the same specificity. This is a nice way of saying: Unless this gets overriden somewhere else, apply these styles.

I think the ability to have a overridable selector is powerful, but may be tricky to use. I don't think I'll use :where() soon, but :is() will sit nicely in my toolbox!