# Write smarter CSS with 2 new selectors

URL: https://theosoti.com/short/css-new-selectors/
Published: 2025-02-21
Author: Theo Soti

> Writing CSS selectors can be tedious, especially when repeating long lists of elements. Thankfully, :is() and :where() make things much cleaner.

## Tired of writing long, tedious CSS selectors?

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.

In practice, `:where()` is ideal for base styles and component resets because its zero specificity stays easy to override. Reserve `:is()` for situations where you still need normal cascade weight.

A good pattern is `:where(article, section, aside) h2` for defaults, then targeted component classes for variations. This keeps selectors short without creating specificity debt.

`:is()` and `:where()` both reduce selector repetition, but specificity is the key difference. Use `:where()` for low-specificity defaults, and keep `:is()` for component rules where matching normal cascade weight is useful.

Use `:where()` for low-specificity defaults and keep `:is()` for grouped rules that should keep normal cascade weight. That split keeps selectors short while avoiding specificity fights later.

On form-heavy pages, this is most effective when you keep semantics native and style enhancements lightweight. That balance preserves accessibility and reduces maintenance cost.

---

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!