I’ve recently wrote about the usage of the universal :where() selector. Now let’s clear up when to use :where() and when :is().

For a quick repetition to what we’re talking about, see these selectors:

.text :where(h2, h3, h4) {}
/* vs. */
.text :is(h2, h3, h4) {}

First of all, :where() and :is() both are forgiving selectors. This means that even if a selector inside isn’t supported by the browser or unknown/invalid, it will still work for the rest. And this means we turn the following into a one-liner as well:

:where() ignores specificity

This selector ignores specificity which means it does not increase by another level when you use the selector. Useful for when you want to avoid unnecessary specificity in your codebase. Specificity will be whatever you stated before the :where() without adding the selectors inside it.

:is() respects and increases specificity

This selector respects the CSS specificity and increases the selector by the level we state in it. In other words, :is() behaves to how we wrote these selectors before: Specificity will be 2, as for when we’d use .text h2 {}.

Browser support

Now that’s pretty cool, isn’t it? Here’s more info:

• It is supported by every major browser (>0,5%).
• Read up more on :where() on MDN
• Read up more on :is() on MDN