Codectionary / Developer documentation / CSS

:is() and :where()

:is() and :where() both accept a list of selectors and match any of them, letting you write more compact selector groups. The key difference is specificity: :is() takes on the specificity of its most specific argument, while :where() always contributes zero specificity, making its rules trivially easy to override.

Syntax

:is(selector-list)
:where(selector-list)

Examples

Reducing Repetition with :is()

Combining what would otherwise be several separate selectors.

/* Demo setup: sizing, structure or neutral surfaces. */
a{display:inline-block;padding:.5rem}

/* Without :is() */
header a:hover, main a:hover, footer a:hover { color: blue; }

/* With :is() - equivalent, more concise */
:is(header, main, footer) a:hover { color: blue; }
  1. All three regions contain links matched by the grouped hover selector.
  2. :is groups alternatives while retaining the relevant specificity rules.
  3. Hover a link to see the rule apply; a hover-only declaration is not expected to colour every resting link.
HTML used by this example
<header><a href="#header">Header link</a></header><main><a href="#main">Main link</a></main><footer><a href="#footer">Footer link</a></footer>

The Specificity Difference

Why :where() is preferred for low-priority base styles.

:is(#sidebar, .content) p { color: #7c3aed; }
p { color: #b45309; }
:where(#sidebar, .content) p { font-weight: 700; }
p { font-weight: 400; }
/* :is wins the colour contest; :where loses the weight contest. */
  1. The markup gives the argument selectors real targets.
  2. :where contributes zero specificity while :is takes the most specific argument.
  3. The updated comparison uses competing rules and two labelled groups so their difference is visible.
HTML used by this example
<aside id="sidebar"><p>Inside the sidebar</p></aside><main class="content"><p>Inside content</p></main>

Parameters and values

  • :is() (pseudo-class): Matches any selector in the list, uses highest specificity among them
  • :where() (pseudo-class): Matches any selector in the list, always contributes zero specificity

Best practices

  • Use :is() to shorten repetitive selector lists that share a common descendant pattern
  • Use :where() specifically for reset styles, base component styles, or CSS you expect (and want) other rules to easily override
  • Remember :where() zero-specificity is a genuine tool for library/design-system authors, so consumers can override defaults without fighting specificity
  • Both accept complex selector lists, including combinators, giving significant power in a compact syntax

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading