:is()

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

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

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

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

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

        
          
          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;
}

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

Слева от двоеточия можно ничего не писать. Внутри скобок селекторы перечисляются через запятую.

Псевдокласс :is() можно использовать с любыми CSS-селекторами:

• :is(.btn, .link) — применяет стили к элементам с классами btn и link.
• :is(#header, .nav, a) — применяет стили к элементам с идентификатором header, классом nav и ко всем ссылкам.
• :is(h1, h2, h3) — применяет стили ко всем заголовкам уровня 1, 2 и 3.

Можно комбинировать :is() с другими селекторами для более сложных условий:

        
          
          article :is(h1, h2, h3) {  margin-bottom: 1rem;}
          article :is(h1, h2, h3) {
  margin-bottom: 1rem;
}

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

Этот код применяет нижнее поле ко всем заголовкам уровня 1, 2 и 3 внутри элемента <article>.

Псевдокласс :is() можно комбинировать с другими псевдоклассами и атрибутами для более гибких селекторов:

        
          
          :is(a:hover, button:focus) {  outline: 2px solid blue;}
          :is(a:hover, button:focus) {
  outline: 2px solid blue;
}

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

Этот код применяет обводку к ссылкам при наведении и кнопкам при фокусировке.

Псевдокласс :is() не принимает произвольные строки. Он должен содержать валидные CSS-селекторы. Например, значение :is(text) будет недействительным, так как text не является селектором.

С помощью :is() не получится обратиться к псевдоэлементам.

Вот так не сработает:

        
          
          .cat-list:is(::before, ::after) {  text-transform: uppercase;}
          .cat-list:is(::before, ::after) {
  text-transform: uppercase;
}

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

И так тоже не сработает:

        
          
          :is(.cat-list::before, .cat-list::after) {  text-transform: uppercase;}
          :is(.cat-list::before, .cat-list::after) {
  text-transform: uppercase;
}

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

Придётся перечислять селекторы так:

        
          
          .cat-list::before,.cat-list::after {  text-transform: uppercase;}
          .cat-list::before,
.cat-list::after {
  text-transform: uppercase;
}

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

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

:is() по весу будет равен самому специфичному из перечисленных в скобках селекторов.

Вычисленный вес в этом примере будет 111, потому что таким будет вес селектора h1.title#title:

        
          
          :is(h1, #title, h1.title#title) {  font-size: 3rem;}
          :is(h1, #title, h1.title#title) {
  font-size: 3rem;
}

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

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

Разница этих поведений может сказаться на итоговых стилях. Учитывайте это.

Псевдоклассы :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;
}

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