Функция :where() помогает писать меньше кода, применять стили ко всему списку и снимает головную боль при использовании CSS reset. В статье разберёмся, как это работает, и посмотрим на примеры использования.

Что это за функция CSS :where()

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

В CSS часто приходится писать длинный список селекторов, разделённых запятыми, когда к нескольким элементам одновременно применяются одни и те же стили.

Вот что бывает, когда один и тот же стиль применим ко всем тегам  <a> внутри header, main  и  footer.

header a:hover,
main a:hover,
footer a:hover {
  color: green;
  text-decoratíon: underline;
}

Выше у нас только три элемента. Но когда их больше, код становится трудно читать и понимать. А ещё он визуально становится некрасивым. Вот тут-то и требуется :where().

:where(header, main, footer) a:hover {
  color: red;
  text-decoratíon: underline;
}

Браузер доходит до такого фрагмента кода. Код отправляет его к селекторам header, main, и footer и ко всем якорям в этих селекторах. Когда пользователь наведет курсор на якорь, браузер применит заданный стиль. В этом случае — red и underline. То есть список селекторов можно записать коротко и ясно.

Что можно сделать с :where() 

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

/* first list */
header a:hover,
main a:hover,
footer a:hover {
  color: green;
  text-decoratíon: underline;
}
/* second list */
article header > p,
article footer > p{
  color: gray;
}
/* third list */
.dark-theme button,
.dark-theme a,
.dim-theme button,
.dim-theme a{
  color: purple;
}

А вот то же самое, сделанное с :where().

/* first list */
/* at the beginning */
:where(header, main, footer) a:hover {
  color: red;
  text-decoratíon: underline;
}
/* second list */
/* in the middle */
article :where(header, footer) > p {
  color: gray;
}
/* third list */
/* at the end */
.dark-theme :where(button, a) {
  color: purple;
}

В первом списке мы указываем, что red и underline должны применяться к header, main, и footer при наведении курсора. 

Во втором списке указываем, что содержание, заголовок и футер окрашены в серый.

В третьем списке мы указываем, что для button и a задали стили .dark-theme и purple.

Упростим ещё.

/* at the end */
.dim-theme :where(button, a) {
  color: purple;
}

И ещё. 

/* stacked */
:where(.dark-theme, .dim-theme) :where(button, a) {
  color: purple;
}

Такой подход к сокращению сложного списка селекторов называется наложением.

Специфичность и :where()

Специфичность — способ, с помощью которого браузеры определяют, какие значения свойств CSS или стили нужно применить к конкретному элементу. 

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

<div>
  <h2>First list no class</h2>
  <ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ol>
</div>
<div>
  <h2>Second list with class</h2>
  <ol class="second-list">
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ol>
</div>
<div>
  <h2>Third list with class</h2>
  <ol class="third-list">
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ol>
</div>

Во фрагменте кода есть три упорядоченных списка с двумя элементами в каждом. У второго и третьего списка есть заданный класс, у первого — нет. Без применения стилей каждый список упорядочен по номерам. 

Добавляем стили. Для этого используем :where(), чтобы выбрать все теги <ol>, к которым применен class.

:where(ol[class]) {
  list-style-type: none;
}

Ниже видим, что :where() применяется ко второму и третьему списку (с классами), поэтому стиль списков удалён.

Добавляем ещё стили.

:where(ol[class]) {
  list-style-type: none;
}
.second-list {
  list-style-type: disc;
}

Если применять :where() только ко второму списку, используя наименование класса, то список отобразится с маркерами. А у третьего списка по-прежнему нет стиля. 

Вопрос: разве так и не должно быть, раз новый стиль записан ниже :where()? Нет, и сейчас разберёмся, почему.

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

.second-list {
  list-style-type: disc;
}
:where(ol[class]) {
  list-style-type: none;
}

Стиль всё ещё не изменился.

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

.second-list {
  list-style-type: disc;
}
:where(ol[class]) {
  list-style-type: none;
}
.third-list{
  list-style-type: disc;
}

Теперь и второй, и третий список отображаются с маркерами, независимо от размещения кода. 

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

Forgiving и :where() 

Если браузер в CSS не распознает только один селектор в списке, весь список окажется недопустимым. Стиль не будет применяться. Но только если не использовать :where().

Если элемент в :where() содержит недопустимый селектор, никакой стиль к этому элементу применен не будет. Но для остальных элементов стили сработают. Функция :where() пропустит недопустимый селектор. Поэтому :where() называют forgiving-селектором, дословно — «прощающим».

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

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

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

:valid, :unsupported {
  ...
}

Где можно и нельзя использовать :where()

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

Улучшить CSS reset

CSS reset — это загрузка набора правил перед применением любых стилей, чтобы очистить браузер от заданных по умолчанию стилей, и чтобы устранить несоответствия между разными браузерами. CSS reset обычно размещают до собственной таблицы стилей, чтобы эти правила сработали первыми. От сложности или простоты селекторов в CSS reset зависит, насколько трудно будет переопределить исходные стили в коде.

Например, представьте, что мы захотели оформить все якоря на странице зелёным. А потом решили, что в футере все якоря должны быть серыми. 

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

Удалить стили

Функция :where() помогает удалить или обнулить стили или изменить специфичность элементов. Когда поместим функцию в код, она сработает как reset на минималках.

Минимизировать код

Короткий код легко читать и исправлять. Хороший тон — проверять, можно ли сократить любой код, в котором есть больше двух запятых или больше трёх элементов списка. Эта же стратегия помогает комбинировать два и более селектора: section > header > p > a.

Функция :where() помогает работать с CSS resets, удалять стили в любом месте кода и просто делать код красивым и понятным. Пользуетесь?