Power Selectors: is, where, has

Modern helper selectors

Small-but-powerful selectors worth knowing: :is(), :where(), :has().

:is()

Best-of specificity:

:is(h1, h2, h3) { margin-top: 1em; }

:where()

Same matching BUT zero specificity:

:where(h1, h2, h3) { margin: 0; }
:where(article, section) p { color: #222; }

Easiest to override later (great for resets).

:has()

Styles a PARENT based on its children:

.card:has(> img) { padding: 0; }
.form:has(input:invalid) { border-color: red; }
.demo:has(.badge) { outline: 1px dashed; }

:not()

a:not([href]) { color: gray; }

Other useful ones

• ::selection: selected text style.
• :target: matches the URL fragment.
• :placeholder-shown: empty field hints.

TL;DR

• :is() best of args, :where() zero specificity.
• :has() styles parents by descendant condition.
• :not(), :target, ::selection handle states.
• Melds beautifully with nesting.