Web/CSS/ where

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.

/* Selects any paragraph inside a header, main
   or footer element that is being hovered */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

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.

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.

:where(:valid, :unsupported) {
  ...
}

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

: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:

<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>.
  </section>

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

  <footer class="is-styling">
    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
  </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>.
  </section>

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

  <footer class="where-styling">
    <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
  </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 make selecting the links inside them simpler, but still distinct, we could use :is() or :where(), in the following manner:

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 simple selector?

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 overidden by our simple selector.

Note: You can also find this example on GitHub; see [[../../../../../../mdn.github.io/css-examples/is-where/index|is-where]].

Syntax

:where( <complex-selector-list> )where <complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '||' ]where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]?  | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='<attr-modifier> = i | s

Specifications

Specification	Status	Comment
Selectors Level 4The definition of ':where()' in that specification.	Working Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`:where()`	Chrome Full support 72 Disabled' Full support 72 Disabled' Disabled' From version 72: this feature is behind the `#enable-experimental-web-platform-features` preference (needs to be set to `Enabled`). To change preferences in Chrome, visit chrome://flags.	Edge No support No	Firefox Full support 78 Full support 78 Full support 77 Notes' Disabled' Notes' Enabled by default in Firefox Nightly. Disabled' From version 77: this feature is behind the `layout.css.is-where-selectors.enabled` preference (needs to be set to `enabled`). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari Full support 14	WebView Android No support No	Chrome Android Full support 72 Disabled' Full support 72 Disabled' Disabled' From version 72: this feature is behind the `#enable-experimental-web-platform-features` preference (needs to be set to `Enabled`). To change preferences in Chrome, visit chrome://flags.	Firefox Android Full support 79	Opera Android No support No	Safari iOS Full support 14	Samsung Internet Android No support No
Support for forgiving selector list	Chrome No support No	Edge No support No	Firefox Full support 82	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 82	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.