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

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

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

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

        
          
          <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 {
  /* Стили */
}

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