Clean Up Your CSS with :is() and :where() Selectors

Write smarter CSS with :is() and :where().

Writing CSS selectors can be tedious, especially when repeating long lists of elements.

Thankfully, :is() and :where() make things much cleaner.

Both of them let you group selectors, reducing redundancy and improving readability.

There is one key difference between the 2: specificity.

:is() inherits the highest specificity from the elements inside it. If one of its child selectors has high specificity, the whole rule does too.
:where() always has zero specificity. It won’t override other styles unless there’s no conflicting rule.

The best part ? They are widely supported in all modern browsers. With over 95% support!

These selectors clean up your CSS, make maintenance easier, and help avoid specificity battles.

I’m working on an ebook called “You Don’t Need JavaScript”.