:where()

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
          
          :is(header, main, footer) a {  color: red;}:where(header, main, footer) a {  color: blue;}
          :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;}
          div.meow {
  color: blue;
}

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать