Для чего нужна запятая в селекторах CSS?
CSS, или каскадные таблицы стилей, являются общепринятым в индустрии веб-дизайна способом добавления визуальных стилей на сайт. С помощью CSS вы можете контролировать макет страницы, цвета, типографику, фоновое изображение и многое другое. По сути, если это визуальный стиль, то CSS – это способ перенести эти стили на ваш сайт.
Добавляя стили CSS в документ, вы можете заметить, что документ начинает становиться все длиннее и длиннее. Даже небольшой сайт, содержащий всего несколько страниц, может получить значительный CSS-файл, а очень большой сайт с большим и большим количеством страниц уникального контента может иметь очень большие CSS-файлы. Это усугубляется адаптивными сайтами, которые содержат множество медиа-запросов, включенных в таблицы стилей, чтобы изменить внешний вид визуальных элементов и расположение страницы на разных экранах.
Да, CSS-файлы могут быть длинными. Это не является серьезной проблемой, когда речь идет о производительности сайта и скорости загрузки, потому что даже длинный CSS-файл, вероятно, будет довольно маленьким (поскольку на самом деле это просто текстовый документ). Тем не менее, каждый бит имеет значение, когда дело доходит до скорости страницы, поэтому, если вы можете сделать свою таблицу стилей более тонкой, это хорошая идея. Вот где «запятая» может оказаться очень полезной в вашей таблице стилей!
Запятые и CSS
Вы, возможно, задавались вопросом, какую роль играет запятая в синтаксисе селектора CSS. Как и в предложениях, запятая вносит ясность, а не код, в разделители. Запятая в селекторе CSS разделяет несколько селекторов в пределах одного и того же стиля.
Например, давайте посмотрим на некоторые CSS ниже.
th
td
p.red
div # firstred
С этим синтаксисом вы говорите, что хотите, чтобы теги th , теги td , теги абзаца с красным классом и тег div с идентификатором firstred all имели стиль красный цвет.
Это вполне приемлемый CSS, но есть два существенных недостатка при написании этого:
- В будущем, если вы решите изменить цвет шрифта этих свойств на синий, вы должны будете сделать это изменение четыре раза в своей таблице стилей.
- Он добавляет много дополнительных символов в вашу таблицу стилей, которые вам не нужны. Эти 4 стиля могут не показаться излишними, но если вы продолжите делать это для всей таблицы стилей, строки будут складываться, и эта таблица будет намного, намного больше, чем нужно.
Чтобы избежать этих недостатков и упростить ваш CSS-файл, мы попробуем использовать запятые.
Использование запятых для разделения селекторов
Вместо того, чтобы писать 4 отдельных селектора CSS и 4 правила, вы можете объединить все эти стили в одно свойство правила, разделяя отдельные селекторы запятой. Вот как это будет сделано:
th, td, p.red, div # firstred
Символ запятой в основном действует как слово «и» внутри селектора. Так что это относится к тэгам h И тэгам td И тэгам абзаца с красным классом И тэгу div с идентификатором firstred. Это именно то, что у нас было раньше, но вместо 4-х CSS-правил у нас есть одно правило с несколькими селекторами. Это то, что делает запятая в селекторе, это позволяет нам иметь несколько селекторов в одном правиле.
Этот подход не только делает более компактные и чистые файлы CSS, он также значительно облегчает будущие обновления. Теперь, если вы хотите изменить цвет с красного на синий, вам нужно будет сделать это только в одном месте, а не в оригинальных 4 правилах стиля, которые у нас были! Подумайте об экономии времени по всему файлу CSS, и вы увидите, как это сэкономит вам время и пространство в долгосрочной перспективе!
Синтаксическая вариация
Некоторые люди предпочитают делать CSS более разборчивым, разделяя каждый селектор на отдельной строке, вместо того, чтобы писать все в одной строке, как указано выше. Вот как это будет сделано:
th,
td,
p.red,
div # firstred
цвет: красный;
>
Обратите внимание, что вы ставите запятую после каждого селектора и затем используете «ввод», чтобы разбить следующий селектор на его собственную строку. Вы НЕ добавляете запятую после последнего селектора.
Используя запятые между селекторами, вы создаете более компактную таблицу стилей, которую легче обновлять в будущем, и которую легче читать сегодня!
Оригинальная статья Дженнифер Крынин.
Группирование
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 17.1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.
Пример 17.1. Стиль для каждого селектора
Из данного примера видно, что стиль для тегов заголовков содержит одинаковое значение font-family . Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 17.2.
Пример 17.2. Сгруппированные селекторы
В данном примере font-family единое для всех селекторов применяется сразу к нескольким тегам, а индивидуальные свойства уже добавляются к каждому селектору отдельно.
Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий.
Селектор 1, Селектор 2, . Селектор N
При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.
Вопросы для проверки
1. Какой цвет фона будет у элемента с классом button при включении приведённого стиля?
.bgzapas, .button, h1 < font-size: 1.2em; padding: 10px; background-color: #fcfaed; >.bgzapas < background-color: #e7f2d7; >.button, h2 < width: 95px; font-size: 11px; color: #f3fced; background-color: #5ca22e; >.bgzapas, .button
Перечисление селекторов
Пишем сразу несколько селекторов, к которым будут применяться стили.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
При помощи перечисления нескольких селекторов через запятую можно избежать дублирования кода.
🤖 Если у нескольких элементов есть определённые повторяющиеся стили, то вполне допустимо вынести эти стили в отдельный блок и в качестве селектора указать несколько классов (или тегов, или идентификаторов), перечислив их через запятую.
Пример
Скопировать ссылку «Пример» Скопировано
Представим, что у всех заголовков на странице одинаковый цвет текста, высота строки и есть декоративный элемент в виде подчёркивания.
Только хорошие новости
Учёные научились выращивать зубы
Группа специалистов впервые сумела вырастить настоящий зуб .
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 — например, БЭМ 😎