:is | CSS-Tricks

The pseudo-select :is() in CSS allows you to write compound selectors more tersely. For example, rather than writing:
This can make quick work of otherwise extremely verbose, complex, and error prone selectors. See:
You can attach the pseudo-selector to an element like you’d expect. Like to select a specific type of element when it has either of two classes:
Simplifying selectors with :is() is similar to how CSS preprocessors handle nested rules:
But beware! Preprocessors, like Sass, “unroll” your nested rules into a list of easily-understood selectors. :is() will handle specificity rules a little differently.
According to the CSS4 Working Draft:
The specificity of the :is() pseudo-class is replaced by the specificity of its most specific argument. Thus, a selector written with :is() does not necessarily have equivalent specificity to the equivalent selector written without :is().
That means that the specificity of :is() gets auto-upgraded to the most specific item in the list of arguments provided:
Normally if any part of a selector is invalid, the entire block is thrown out:
I’ve heard browsers might chill out on this in the future, but we aren’t there yet. If you are hoping to keep that and not have to break it into two separate blocks, is() can help because it’s “forgiving”:
I always think about ::selection and the ::-moz-selection vendor prefix version when I think of invalid comma-separated selectors, but…
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
To get the best support, you might look at also using :matches (with vendor-prefixed :any filling in some gaps) for the general functionality. And, :not() is another pseudo-class that can assist with matching.
What’s interesting to note is that :is() was introduced after :matches which was introduced after :any. It’s sort of like :any is being replaced by :matches which is being replaced by :is(), with the details changing along the way. Always neat to see how these things evolve.
To get maximum support for “Matches-Any” requires using a mix of the historical names, as browser handling is currently a hodgepodge of vendor-prefixes and experimental settings at this point.
Originally, this pseudo-class was named :any() and was implemented with limited vendor-specific support:
The “Matches-Any” pseudo-class name was then changed to :matches() in early versions of the CSS4 working draft, with additional (incomplete) support being given to some browsers.
The goal of the “Matches Any” selector is to make complex groupings of selectors easier to write, which is exactly what we got and more with :is().
We've got lots of ways to help you connect with the greatest front-end community in all the land.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shirts, prints, stickers, and yes, even mousepads at the brand-spankin' new CSS-Tricks store, now open.
CSS-Tricks is powered by a small team of real-life humans.
Handwritten. Twice a month. No spam. See past issues →