Functional selectors: `:is()`, `:where()`, `:not()` and combined patterns

Learn how to reduce repetition, control specificity and build maintainable selectors with `:is()`, `:where()` and `:not()` in real interface patterns.

How much do you know about CSS?

📘 Theory

What each functional selector solves

Use each one with intention: group, neutralize specificity or exclude.

`:is()` simplifies repeated selector lists. Instead of writing `header a, main a, footer a`, you can write `:is(header, main, footer) a`.

`:where()` has zero specificity, which makes it ideal for base styles that should never fight with component classes.

`:not()` helps you express exceptions cleanly when you want one general rule except for a few variants.

`:is()`: group selectors without repeating long prefixes.
`:where()`: write a base that stays easy to override.
`:not()`: explicit and maintainable exclusion.

Specificity strategy

Prevent specificity wars at the selector design stage.

If a rule is foundational, such as base typography or default spacing, `:where()` is often the safest choice because it does not block future overrides.

Reserve `:is()` for grouping equivalent selectors inside components or layout structures.

Combine functional selectors with state classes such as `.is-active` or `.is-disabled`, letting the selector reduce structural repetition instead of inflating complexity.

1 What each functional selector solves 2 Specificity strategy