The :is()CSSpseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

Note that currently browsers support this functionality as :matches(), or through an older, prefixed pseudo-class — :any(), including older versions of Chrome, Firefox, and Safari. :any() works in exactly the same way as :matches()/:is(), except that it requires vendor prefixes and doesn't support complex selectors.

Avoiding selector list invalidation

Unlike selector lists, the :is() pseudo-class doesn't get invalidated when one of the selectors passed to it isn't supported by the browser.

:is(:valid, :unsupported) {
...
}

Will still parse correctly and match :valid even in browsers which don't support :unsupported, whereas:

:valid, :unsupported {
...
}

Will be ignored in browsers which don't support :unsupported even if they support :valid.

Difference between :is() and :where()

The diffference between the two is that :is() counts towards the specificity of the overall selector (it takes the specificity of its most specific argument), whereas :where() has a specificity value of 0. This is demonstrated by the example on the :where() reference page.

Notes

any(): — Issues with performance and specificity

bug 561154 tracks an issue with Gecko where the specificity of :-moz-any() is incorrect. The current (as of Firefox 12) implementation puts :-moz-any() in the category of universal rules, meaning using it as the rightmost selector will be slower than using an ID, class, or tag as the rightmost selector.

Disabled From version 66 until version 71 (exclusive): this feature is behind the Experimental Web Platform Features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.

Disabled From version 66 until version 71 (exclusive): this feature is behind the Experimental Web Platform Features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.