Перечисление селекторов

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

Кратко

Секция статьи "Кратко"

При помощи перечисления нескольких селекторов через запятую можно избежать дублирования кода.

🤖 Если у нескольких элементов есть определённые повторяющиеся стили, то вполне допустимо вынести эти стили в отдельный блок и в качестве селектора указать несколько классов (или тегов, или идентификаторов), перечислив их через запятую.

Пример

Секция статьи "Пример"

Представим, что у всех заголовков на странице одинаковый цвет текста, высота строки и есть декоративный элемент в виде подчёркивания.

        
          
          <div class="wrapper">  <h1 class="main-title">Только хорошие новости</h1>  <h2 class="title">Учёные научились выращивать зубы</h2>  <p class="text">Группа специалистов впервые сумела вырастить настоящий зуб ...</p></div>
          <div class="wrapper">
  <h1 class="main-title">Только хорошие новости</h1>
  <h2 class="title">Учёные научились выращивать зубы</h2>
  <p class="text">Группа специалистов впервые сумела вырастить настоящий зуб ...</p>
</div>

        
        
          
        
      

Задаём общие стили для заголовков. Ниже создаём одинаковые декоративные подчёркивания при помощи псевдоэлементов.

        
          
          .main-title,.title {  position: relative;  display: inline-block;  color: #ffffff;  font-weight: 500;}.main-title::before,.title::before {  content: "";  position: absolute;  bottom: -5px;  left: 0;  width: 100%;  height: 3px;  border-radius: 3px;  background-color: #FFFFFF;  z-index: -1;}
          .main-title,
.title {
  position: relative;
  display: inline-block;
  color: #ffffff;
  font-weight: 500;
}

.main-title::before,
.title::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background-color: #FFFFFF;
  z-index: -1;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как это понять

Секция статьи "Как это понять"

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

Как пишется

Секция статьи "Как пишется"

Указывается один селектор, после него ставится запятая, через пробел указывается второй селектор и так далее.

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

Селекторами может быть не только селектор по классу, но и селектор по тегу или по идентификатору, или даже их комбинация.

Подсказки

Секция статьи "Подсказки"

💡 Если стили у перечисляемых блоков не отличаются ничем, то это причина пересмотреть разметку и задать одинаковым по стилям элементам одинаковый класс.

💡 Если перечисляете через запятую составные селекторы, то нужно указывать их полностью.

На практике

Секция статьи "На практике"

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

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

Вложенным селектор считается только в первой строке, остальные классы отдельные,
сами по себе.

Вот так неверно:

        
          
          .parent-class .child-class,.another-class,.one-another-class {  /* Стили */}
          .parent-class .child-class,
.another-class,
.one-another-class {
  /* Стили */
}

        
        
          
        
      

А вот так верно! Все три перечисленных селектора являются вложенными:

        
          
          .parent-class .child-class,.parent-class .another-class,.parent-class .one-another-class {  /* Стили */}
          .parent-class .child-class,
.parent-class .another-class,
.parent-class .one-another-class {
  /* Стили */
}

        
        
          
        
      

По факту, перечисление через запятую — просто удобный способ сокращения кода, что вписывается в рамки принципа DRY.

🛠 Не злоупотребляйте перечислением селекторов через запятую. Особенно составных. Если в стилях слишком много перечислений селекторов, присмотритесь к одной из методологий написания CSS — например, БЭМ 😎