skip to main content

.first-class, .second-class

css

Кратко 🔗

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

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

Пример 🔗

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

HTML

<div class="wrapper">
<h1 class="main-title">Основной заголовок</h1>
<h2 class="title">Новости</h2>
<p class="text">Lorem ipsum ...</p>
</div>

CSS

/* Задаём общие стили для заголовков */
.main-title,
.title
{
position: relative;
color: #ffffff;
font-weight: 500;
}

/* Создаём одинаковые декоративные подчёркивания */
.main-title:before,
.title:before
{
content: "";
position: absolute;
bottom: 2px;
left: 0;
width: 100%;
height: 7px;
margin: auto;
background-color: #1a5ad7;
z-index: -1;
}

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

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

Как пишется 🔗

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

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

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

Подсказки 🔗

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

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

В работе 🔗

Алёна,

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

Пример:

CSS

/* НЕВЕРНО */
/* Вложенным селектор считается только в первой строке, остальные классы отдельные,
сами по себе */

.parrent-class .child-class,
.another-class,
.one-another-class
{
...;
}

/* ВЕРНО */
/* Все три перечисленных селектора являются вложенными */
.parrent-class .child-class,
.parrent-class .another-class,
.parrent-class .one-another-class
{
...;
}

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

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

Автор: Алёна,