:where()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

The difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.

Try it

Syntax

The :where() pseudo-class requires a selector list, a comma-separated list of one or more selectors, as its argument. The list must not contain a pseudo-element, but any other simple, compound, and complex selectors are allowed.

css
:where(<complex-selector-list>) {
  /* ... */
}

Forgiving Selector Parsing

The specification defines :is() and :where() as accepting a forgiving selector list.

In CSS when using a selector list, if any of the selectors are invalid then the whole list is deemed invalid. When using :is() or :where() instead of the whole list of selectors being deemed invalid if one fails to parse, the incorrect or unsupported selector will be ignored and the others used.

css
:where(:valid, :unsupported) {
  /* … */
}

Will still parse correctly and match :valid even in browsers which don't support :unsupported, whereas:

css
:valid,
:unsupported {
  /* … */
}

Will be ignored in browsers which don't support :unsupported even if they support :valid.

Examples

Comparing :where() and :is()

This example shows how :where() works, and also illustrates the difference between :where() and :is().

Take the following HTML:

html
<article>
  <h2>:is()-styled links</h2>
  <section class="is-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="is-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

<article>
  <h2>:where()-styled links</h2>
  <section class="where-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="where-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

In this somewhat-contrived example, we have two articles that each contain a section, an aside, and a footer. They differ by the classes used to mark the child elements.

To group the selection of links, while keeping the is-styling and where-styling styles distinct, we could use :is() or :where(), in the following manner:

css
html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}

However, what if we later want to override the color of links in the footers using a compound selector made up of low-specificity type selectors?

css
footer a {
  color: blue;
}

This won't work for the red links, because the selectors inside :is() count towards the specificity of the overall selector, and class selectors have a higher specificity than element selectors.

However, selectors inside :where() have specificity 0, so the orange footer link will be overridden by our type-only compound selector.

Note: You can also find this example on GitHub; see is-where.

Specifications

Specification
Selectors Level 4
# zero-matches

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:where()
Support for forgiving selector list

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also