/ ↲
    Расширенный поиск

    CSS

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

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

    Время чтения: меньше 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 — например, БЭМ 😎

    Читайте также