:where()

Кратко

Функция-псевдокласс :where() принимает один или несколько селекторов в качестве аргумента. Браузер при чтении применяет стили к любому из селекторов-аргументов.

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

Пример

Применим стили для ссылок, вложенных в <header>, <main> или <footer>:

:where(header, main, footer) a {
  color: blue;
}

Без использования :where() пришлось бы перечислять селекторы:

header a,
main a,
footer a {
  color: blue;
}

Как пишется

Любой из переданных селекторов:

:where(header, main, footer) {
  color: blue;
}

<header> с любым из переданных классов:

header:where(.content-header, .section-header) {
  color: blue;
}

Как понять

Можно объяснить работу :where() как «возьми все селекторы из списка, но не добавляй им веса». Это полезно, если вы хотите применить стили к нескольким селекторам и при этом обойтись без перечисления, вдобавок не переживая о повышенной специфичности итогового селектора. Пример ниже демонстрирует возможность легко переопределить свойства, заданные с помощью :where():

Разница специфичности между :where() и :is()

Не забываем про разницу в специфичности :where() и :is(). Несмотря на то, что :where() расположен ниже, текст ссылок будет окрашен в красный цвет за счёт специфичности селекторов, переданных в псевдокласс :is():

:is(header, main, footer) a {
  color: red;
}

:where(header, main, footer) a {
  color: blue;
}

По этой же причине текст внутри <div> с классом meow будет синим:

div.meow {
  color: blue;
}

div:where(.meow) {
  color: red;
}

Прощающие селекторы

Псевдоклассы :where() и :is() относятся к «прощающему списку селекторов». Невалидный селектор в списке аргументов не приведёт к игнорированию валидных селекторов.

Стили ниже применятся к <span>, а нерабочий селектор :some-unsupported-feature будет проигнорирован:

:where(span, :some-unsupported-feature) {
  color: blue;
}

Скопировать

Тут та же история:

:is(span, :some-unsupported-feature) {
  color: blue;
}

Скопировать

А вот если указать неподдерживаемое свойство :some-unsupported-feature в перечислении, то всё сломается, не сработает ни один из селекторов:

span,
:some-unsupported-feature {
  color: red;
}