В начале года в ЦСС появились два интересных селектора. Они помогают уменьшить количество кода, нужного для решения некоторых задач по вёрстке.

На ноябрь 2021 года селекторы :is и :where поддерживают 93% браузеров. Совсем нет поддержки только в Интернет Эксплорере и древней мобильной Опере.
Can I Use

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

На ноябрь 2021 года селекторы :is и :where поддерживают 93% браузеров. Совсем нет поддержки только в Интернет Эксплорере и древней мобильной Опере.
Can I Use

Как сейчас

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

.content h1,
.content h2,
.content h3 {
  font-family: 'Helvetica', sans-serif;
}

Как можно с новыми селекторами

Селектор :is работает как массив селекторов и заметно упрощает код. Как и выше, стилизуем все вложенные в контейнер заголовки, но уже гораздо короче и лаконичнее:

.content :is(h1, h2, h3) {
  font-family: 'Helvetica', sans-serif;
}

Селектор :where на первый взгляд работает так же:

.content :where(h1, h2, h3) {
  font-family: 'Helvetica', sans-serif;
}

Разница между :is и :where

Селекторы отличаются специфичностью, то есть приоритетом применения своих стилей. Если вы ещё не знакомы с понятием специфичности, прочитайте совет Юрия Мазурского.

Селектор :is получает специфичность самого специфичного из перечисленных внутри него селекторов. А значит вполне может перебить уже имеющиеся в коде селекторы с меньшей специфичностью:

.content :is(.heading, h1, h2, h3) {
  color: red;
}
      
.heading {
  color: blue;
}
Цвет простого селектора‑класса перебивается селектором с :is, потому что он получает специфичность сразу двух классов: .content и .heading внутри. Специфичность двух классов «побеждает» специфичность одного класса

А :where не имеет никакой специфичности:

.content :where(.heading, h1, h2, h3) {
  color: red;
}
      
.heading {
  color: blue;
}

Цвет селектора‑класса не перебивается цветом селектора с :where, потому что у него нет дополнительной специфичности, получаются два селектора со специфичностью одного класса. При прочих равных, «побеждает» тот, что расположен в коде ниже

При внедрении на работающий сайт, может быть безопаснее использовать :where, чтобы случайно не перебить уже существующие стили там, где вам это не нужно.

Совместимость с другими селекторами

Конечно, новые селекторы можно комбинировать друг с другом и другими селекторами:

:where(.article, .longread) :is(blockquote, .rule) {
  font-size: 48px;
}
        
:is(.smallArticle, .preview) .authorPhoto {
  display: none;
}
        
:where(.listWithMarkers, .footnote) li:before {
  content: '★ ';
}
        
section:is(.highlighted, .featured) {
  background: #fff5cf;
}


Но помните, что чем проще ЦСС‑код, тем проще и дешевле его поддерживать и развивать. Вместо сложных составных селекторов бывает лучше просто добавить новый класс.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы