css is() and where()

CSS :is() and :where() — Write DRY Selectors

by

Ever get tired of repeating long selectors just to apply the same styles to multiple elements? The new :is() and :where() pseudo-classes solve this problem beautifully! They let you group selectors together in a single, clean rule — making your CSS shorter, more maintainable, and easier to read. In this MiniCoursey quick guide, you’ll learn how :is() and :where() work, their key differences, and how to use them to write DRY, modern CSS.

What is :is()?

:is() allows you to group multiple selectors and apply styles to any element that matches. It keeps your rules concise and clear, especially for complex hierarchies.


:is(h1, h2, h3) {
  margin-bottom: 1rem;
}

This rule targets all h1, h2, and h3 headings with a single selector.

What is :where()?

:where() works just like :is() but always has zero specificity. This means it won’t accidentally override other styles, making it perfect for resets and base styles.


:where(ul, ol) {
  padding-left: 1.5rem;
}

Here, both ul and ol lists get consistent padding without adding extra weight to your selectors.

Key Differences

  • :is() — keeps normal specificity based on the most specific selector inside.
  • :where() — always zero specificity.

💡 Pro Tip: Use :where() for resets and base layers, and :is() for practical grouping where specificity matters.

⚠️ Common Mistake: Don’t forget browser support — these pseudo-classes are modern but well-supported in current browsers.

FAQ

Q: Can I nest pseudo-classes inside?
A: Yes! Combine them with :hover, :focus, or any valid selector.

Q: Do they replace pre-processors?
A: Not entirely — but they remove the need for some repetitive nesting or mixins.

Related Link

👉 Check out previous: CSS Aspect-Ratio vs Container Queries — When to Use Each

Where to Learn More

Check out MDN’s docs on :is() and :where() for more advanced patterns and examples.

Conclusion

Congrats — you now know how to write DRY selectors with :is() and :where()! Keep your CSS clean, short, and future-friendly.

✨ Bookmark MiniCoursey for more quick & free mini courses!

Leave a Comment