CSS группы селекторов

Поддержка браузерами

Описание

Если необходимо применить одинаковый стиль сразу к нескольким различным элементам веб-страницы, можно указать необходимые селекторы через запятую, создав тем самым группу селекторов:

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

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

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

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

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

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

Пример:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      h1, p {
        color:yellow;
        background-color:black;
      }
    </style>
  </head>

  <body>
    <h1> Добро пожаловать! </h1>

    <div>
      <p > Меня зовут Арни. </p>
      <p> Я играю в <span>онлайн</span> игры. </p>
    </div>
    <p> Моего кота тоже зовут Арни. </p>

  </body>
</html>

Результат данного примера:

Добро пожаловать!

Меня зовут Арни.

Я играю в онлайн игры.

Моего кота тоже зовут Арни.