:where()

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

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

Спецификация определяет :is() и :where() как принимающие допускающий список селекторов.

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

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

Будет всё ещё корректно проанализирован и сопоставлен с :valid даже в браузерах, которые не поддерживают :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>.
    </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>

В этом несколько искусственном примере у нас есть два статьи, каждая из которых содержит раздел, заметку и подвал. Они различаются используемыми классами для обозначения дочерних элементов.

Для группировки выбора ссылок, сохраняя при этом is-styling и where-styling стили отличными, мы могли бы использовать :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 a {
  color: blue;
}

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

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

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