Группировка селекторов
Для применения одного и того же блока объявлений сразу к нескольких элементам используется запятая, позволяющая объединять селекторы в группу. Группировка селекторов помогает существенно сокращать 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>
Результат
Группировка селекторов
Группировка селекторов позволяет значительно сократить объём кода!