:where()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2021 г..

CSS псевдокласс:where() в качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка.

css

/* Выбирает любой параграф внутри header, main   или footer на который наведён курсор мыши */:where(header, main, footer) p:hover {  color: red;  cursor: pointer;}/* Пример приведённый выше эквивалентен следующему */header p:hover,main p:hover,footer p:hover {  color: red;  cursor: pointer;}

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

Парсинг forgiving-селектора

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

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

css

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

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

css

:valid, :unsupported {  ...}

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

Примеры

Сравнение :where() и :is()

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

Возьмём следующий HTML-код:

html

<article>  <h2>:is()-styled links</h2>  <section>    <p>      Here is my main content. This      <a href="https://mozilla.org">contains a link</a>.    </p>  </section>  <aside>    <p>      Here is my aside content. This      <a href="https://developer.mozilla.org">also contains a link</a>.    </p>  </aside>  <footer>    <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>    <p>      Here is my main content. This      <a href="https://mozilla.org">contains a link</a>.    </p>  </section>  <aside>    <p>      Here is my aside content. This      <a href="https://developer.mozilla.org">also contains a link</a>.    </p>  </aside>  <footer>    <p>      This is my footer, also containing      <a href="https://github.com/mdn">a link</a>.    </p>  </footer></article>

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

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

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

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

css

footer a {  color: blue;}

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

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

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