How :is() and :where() Reduce Specificity by 90%
Two of the most powerful tools in modern CSS are also the most misunderstood: the :is() and :where() pseudo-classes. When used correctly, they can reduce your stylesheet specificity by up to ninety percent while making your code dramatically more readable.
The old way of writing complex selectors often looked like this: header a, aside a, footer a. Each part carried full specificity weight. The new way uses :is() and changes everything.
The Power of Forgiveness
Here’s the key difference: :where() has zero specificity. That’s right — zero. This means you can wrap complex selectors without adding any weight to the cascade calculations. This single feature solves countless specificity conflicts.
Meanwhile, :is() takes the specificity of its most specific argument. This gives you fine-grained control when needed, but still far less than traditional nested selectors.
Real-World Transformation
Consider a common pattern: styling links in different sections. Before, you might write header a, .sidebar a, main a, footer a. Each selector has full weight. Now you can write :is(header, .sidebar, main, footer) a and the specificity comes only from the a tag — dramatically lower.
Even better, use :where(). The selector :where(header, .sidebar, main, footer) a has exactly the same specificity as a simple a tag. This makes overrides trivial and predictable.
Combining with Modern Patterns
These pseudo-classes work beautifully with utility frameworks and component-based styling. You can create reusable patterns that adapt to context without fighting specificity wars.
The result is CSS that flows naturally with the cascade instead of constantly battling against it. Styles become easier to reason about, simpler to override, and much more maintainable over time.
Many developers avoid these features because they seem complex. But once adopted, they become indispensable tools for writing professional-grade CSS.
The future of CSS is forgiving — and :is() with :where() are leading the way.