CSS :is() and :where() - Selector Lists and Specificity

:is() and :where() Pseudo-classes

Both :is() and :where() accept a comma-separated list of selectors and match any element that matches one of them. They dramatically reduce CSS repetition, but differ in specificity behavior.

:is() — Matches-Any with Full Specificity

/* Without :is() — repetitive */
article h1, article h2, article h3,
section h1, section h2, section h3 {
  line-height: 1.2;
}

/* With :is() — concise */
:is(article, section) :is(h1, h2, h3) {
  line-height: 1.2;
}

The specificity of :is() equals the most specific selector in its argument list:

:is(.class, #id) { }  /* Specificity: (1, 0, 0) — from #id */

:where() — Zero Specificity

/* Easy-to-override defaults */
:where(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  font-weight: 700;
}

No matter what selectors are inside :where(), the specificity is always (0, 0, 0). This makes it perfect for:

• CSS reset/normalize styles
• Framework default styles that users should easily override
• Low-priority fallback rules

Practical Patterns

Scoped typography:

:is(.prose, .content, .article) :is(p, ul, ol) {
  max-width: 65ch;
  line-height: 1.6;
}

Error tolerance:

Unlike a regular selector list, :is() is forgiving — if one selector is invalid, the others still work:

/* If :unknown is invalid, the whole rule is thrown away */
h1, :unknown, h2 { color: red; }

/* With :is(), only the invalid part is ignored */
:is(h1, :unknown, h2) { color: red; }

Browser Support

Both :is() and :where() are supported in Chrome 88+, Firefox 78+, and Safari 14+.