Using :is() and :where() to manage specificity

WHAT THIS TESTS This checks whether you understand two modern grouping pseudo-classes at the level of specificity math, and can apply them to keep a BEM or component architecture maintainable. The trap is assuming they behave the same.

A GOOD ANSWER COVERS Both :is() and :where() accept a comma-separated selector list and match if any selector matches, letting you collapse repetitive compound selectors into one. They are also forgiving: an unknown or unsupported selector in the list is ignored rather than invalidating the whole rule. The crucial difference is specificity. :is() takes on the specificity of its most specific argument, so it can raise specificity unexpectedly if you include an id or a heavy selector. :where() always has zero specificity, contributing nothing, which makes it perfect for defaults and resets that any component class should override without a fight. In a BEM-like system, use :where() to wrap base element or theme styles so block and modifier classes win easily, and use :is() to group state variations, like several modifier or state classes, without writing each selector out.

COMMON WRONG ANSWERS Saying :is() and :where() are interchangeable. Claiming both reduce specificity; only :where() zeroes it. Forgetting the forgiving nature, or assuming an invalid item breaks the rule. Putting high-specificity selectors inside :is() and being surprised by overrides.

LIKELY FOLLOW-UPS What specificity does :is(.a, #b) have? Why is :where() ideal for a CSS reset or library defaults? How does the forgiving parsing help with progressive enhancement? When would raising specificity via :is() actually be desirable?

ONE CONCRETE EXAMPLE For a card whose title should change color in several states, you write :is(.card--active, .card--featured) .card__title once instead of two separate rules. For library default link colors that consumers must override trivially, you wrap them in :where(a) so any project class beats them, since :where() adds zero specificity.