Псевдокласс CSS `:where()`

:where() — функция CSS-псевдокласса, которая принимает список селекторов в качестве аргумента и выбирает любой элемент, соответствующий одному из селекторов в этом списке.

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

Попробуйте

ol {
  list-style-type: upper-alpha;
  color: darkblue;
}

/* Not applied to ol, because of lower specificity */
:where(ol, ul, menu:unsupported) :where(ol, ul) {
  color: green;
}

:where(ol, ul) :where(ol, ul) ol {
  list-style-type: lower-greek;
  color: chocolate;
}

<ol>
  <li>Saturn</li>
  <li>
    <ul>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ul>
  </li>
  <li>Uranus</li>
  <li>
    <ol>
      <li>Titania</li>
      <li>Oberon</li>
    </ol>
  </li>
</ol>

Синтаксис

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

Параметры

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

Нестрогий разбор селекторов

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

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

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

По-прежнему будет корректно разобран и выберет :valid даже в браузерах, которые не поддерживают :unsupported, тогда как:

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

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

Примеры

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

В этом примере показано, как работает :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()
• Список селекторов
• Веб-компоненты
• Нестрогий список селекторов на сайте csswg.org.