Иногда бывает нужно, чтобы какие-то стили CSS, которые имеют одно и тоже значение, применились сразу к нескольким селекторам.

Предположим, что мы хотим, чтобы красным цветом у нас были выделены элементы с атрибутом class="red" и элементы с атрибутом id="test"

<p class="red">Абзац 1</p>
<p class="red">Абзац 2</p>
<ul>
    <li id="test">Элемент 1</li>
    <li>Элемент 2</li>
</ul>

Как это можно сделать?

Решение этой задачи становиться возможной благодаря записи селекторов через запятую.

Например,

.red, #test {color:red;}

Запятая - это разделитель селекторов. Такая форма записи означает, что стили CSS, должны быть применены к элементам с классом red И элемента с id = "test".

Такой формой записи можно экономить место в исходном коде CSS стилей (это более компактная форма записи) и гибко управлять оформлением вашей веб-страницы.