Перечисление селекторов
Пишем сразу несколько селекторов, к которым будут применяться стили.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 9 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
При помощи перечисления нескольких селекторов через запятую можно избежать дублирования кода.
�� Если у нескольких элементов есть определённые повторяющиеся стили, то вполне допустимо вынести эти стили в отдельный блок и в качестве селектора указать несколько классов (или тегов, или идентификаторов), перечислив их через запятую.
Пример
Скопировать ссылку «Пример» Скопировано
Представим, что у всех заголовков на странице одинаковый цвет текста, высота строки и есть декоративный элемент в виде подчёркивания.
Только хорошие новости
Учёные научились выращивать зубы
Группа специалистов впервые сумела вырастить настоящий зуб .
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 — например, БЭМ ��
Используем два класса
Общее оформление для всех преимуществ готово, теперь надо «раскидать» их по тарифам.
Вспомните, как мы отделили элементы-преимущества от обычных элементов. Мы добавили им класс, который говорит, что перед нами преимущество ( advantages-item ). Можем ли мы некоторым преимуществам добавить ещё один класс, который привяжет их к какому-то тарифу и отделит их от других преимуществ? Можем, и тогда у одного элемента будет сразу два класса.
На самом деле у HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class через пробел, например:
Использование нескольких классов — это типовой приём, который ещё называется миксованием классов. Обычно его используют так: в один класс выносят общее оформление, а в дополнительных классах описывают его модификации. В примере выше размеры карточек товаров можно описать в CSS-правиле .product , а особый фон для хита продаж — в правиле .hit . В общем, удобный приём, помогает сократить дублирование кода.
Осталось придумать наши классы для тарифов. Для эконом-тарифа дополнительный класс вводить не будем, для стандартного тарифа используем класс standard , а для вип-тарифа — vip . Всё, можно дорабатывать разметку.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Разнообразные товары для дома с доставкой по всей планете
