:is() and :where() — selector list helpers

Two functions that simplify selector lists

/* Without — verbose */
.article h1, .article h2, .article h3 { color: #1a1a1a; }

/* With :is() — concise */
.article :is(h1, h2, h3) { color: #1a1a1a; }

:is() vs :where()

Both take a list of selectors. The difference is specificity:

• `:is(selector-list)` — specificity = HIGHEST of the inner selectors.
• `:where(selector-list)` — specificity = ALWAYS ZERO. Easy to override.

:is(h1, .title) { color: red; }     /* if .title matches, specificity is (0,1,0) */
:where(h1, .title) { color: red; }  /* specificity stays (0,0,0) — easy to override */

When to use which

• `:is` — when you want NORMAL specificity (most cases).
• `:where` — for RESETS and BASE styles you want easy to override.

:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

This RESET rule has zero specificity. Any later rule (no matter how generic) overrides it.

Nesting savings

.feature :is(.left, .center, .right) :is(h2, h3) { ... }

Expands to 6 selectors. Without :is, you'd write all 6 by hand.