:is()

Пишем условие для селектора, при котором стили применятся.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

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

Полностью поддерживается во всех стабильных браузерах с января 2021 года. Чуть более широкую поддержку можно получить, если использовать устаревшие версии с префиксами :-webkit-any(), :-moz-any() и :matches(). Подробнее смотрите на Can I use.

Как пишется

Скопировано

Применяем стили по наведению курсора на абзацы, вложенные в <header>, <main> или <footer>:

        
          
          :is(header, main, footer) p:hover {  color: red;  cursor: pointer;}
          :is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

        
        
          
        
      

Иначе этот селектор пришлось бы записать гораздо более многословно:

        
          
          header p:hover,main p:hover,footer p:hover {  color: red;  cursor: pointer;}
          header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}