:where()

В спецификации псевдоклассы :is() и :where() относятся к так называемому forgiving selector list (прощающий список селекторов).

При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании :is() или :where() действует другое правило: если среди переданных аргументов будет некорректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.

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

Пример выше будет успешно распарсен и для :valid будут применены CSS-правила, даже если в браузере не поддерживается :unsupported, в то время как:

:valid, :unsupported {
  ...
}

Код будет полностью проигнорирован в браузерах, которые не поддерживают :unsupported, даже не смотря на то, что они поддерживают :valid.

В этом примере показывается как работает :where(), а так же демонстрируется разница между :where() и :is().

Возьмём следующий 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>

В примере выше у нас представлено две статьи, каждая из которых содержит следующие блоки: section, aside и footer. Каждый из блоков имеет свой CSS-класс.

Теперь при помощи псевдоклассов :is() и :where() зададим цвет для ссылок в простой форме, как в примере ниже:

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;
}

Что если позже мы захотим переопределить цвет ссылок в footer'ах используя простой селектор?

footer a {
  color: blue;
}

Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри :is() выше, чем специфичность селектора вышеприведённого кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.

В то время как, селекторы перечисленные внутри :where() имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.

Примечание: вы так же можете найти этот пример на Github; смотрите is-where.

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

• :is()
• Список селекторов
• Веб-компоненты