:is() and :where()
:is() groups selectors and adopts the specificity of its most specific argument. :where() also groups selectors but always has zero specificity.
:where() is particularly useful for framework or component defaults that should be easy for consumers to override.
:is() vs :where()
Grouping Selectors
:is(h1, h2, h3) {
line-height: 1.1;
}
:where(.card, .panel) {
border-radius: 1rem;
}💡 Both functions simplify selector grouping, but they differ in specificity behavior.
Key Takeaways
:is()contributes the specificity of its most specific argument.:where()always contributes zero specificity.
Knowledge Check
What is special about the specificity of `:where()`?