Погружение в :where() функцию CSS

Функция CSS :where() — новейшее детище в блоке псевдоклассов. Он принимает список селекторов в качестве аргументов и минимизирует их, позволяя вам писать меньше кода и в то же время стилизовать их все вместе.

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

Что такое CSS :where()?

Согласно MDN:

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

:where() очень полезен для сокращения длинного списка селекторов.

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

Вот пример, в котором мы применяем один и тот же стиль ко всем <a> тегам, найденным внутри header, main элемента и footer элемента:

header a:hover,
main a:hover,
footer a:hover {
  color: green;
  text-decoration: underline;
}

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

Вот как вышеприведенный пример будет выглядеть с использованием :where() функции:

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

Давайте подробнее рассмотрим, как работает этот код.

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

Эта функция псевдокласса дает нам роскошь писать длинный список селекторов таким образом, чтобы он был короче и понятнее.

Попробуйте!

Дополнил:

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

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

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

:valid, :unsupported {
  ...
}

https://developer.mozilla.org/ru/docs/Web/CSS/:where)