Группировка селекторов

Для применения одного и того же блока объявлений сразу к нескольких элементам используется запятая, позволяющая объединять селекторы в группу. Группировка селекторов помогает существенно сокращать CSS-код, объединяя повторяющиеся свойства в один блок объявлений:

/* Одинаковый стиль у трёх элементов */
h1 { color: blue; }
span { color: blue; }
p { color: blue; }

/* Тоже самое, только селекторы перечислены через запятую */
h1, span, p { color: blue; }

Запятая указывает, что в CSS-правиле используются разные селекторы, сгруппированные для применения к ним одного стиля. Если убрать (пропустить) запятую, селектор приобретёт иное значение — значение комбинатора.

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

h1, h2..foo, h3 { font-family: sans-serif; }

h1, h2, h3, { font-family: sans-serif; }

В этих двух случаях вся группа селекторов будет считаться ошибочной, и правила стиля не будут применяться.

Пример

h2, span { font-style: italic; color: green; }

<h2>Группировка селекторов</h2>

<p><span>Группировка селекторов</span> позволяет
значительно сократить объём кода!</p>

Результат

Группировка селекторов

Группировка селекторов позволяет значительно сократить объём кода!