Группировка

На данный момент мы изучили довольно простые методики применения одного стиля к одному селектору. Но что если вы хотите один и тот же стиль применить к нескольким элементам? Тогда понадобятся несколько селекторов или потребуется применить несколько стилей к элементу или группе элементов.

Группировка селекторов
Предположим, вы хотите, чтобы текст элементов h2 и абзацев был серого цвета. Проще всего это достигается посредством следующего объявления:

h2, p {color: gray;}

Поместив в левой части правила разделенные запятой селекторы h2 и p, вы определяете правило, в котором находящийся в правой части стиль (color: gray;) применяется к элементам, обозначенным обоими селекторами. Запятая сообщает броузеру о том, что в правило включены два разных селектора. Если запятую опустить, правило приобретет совершенно другое значение, о чем мы поговорим позже в разделе «Селекторы потомков». Нет никаких ограничений на количество объединяемых в группу селекторов. Например, если необходимо отобразить несколько элементов в сером цвете, можно применить приблизительно такое правило:

body, table, th, td, h1, h2, h3, h4, p, pre, strong, em, b, i {color: gray;}

Группировка позволяет автору сделать определенные типы назначений стилей более компактными, что способствует сокращению таблицы стилей.


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

h1 {color: purple;}
h2 {color: purple;}
h3 {color: purple;}
h4 {color: purple;}
h5 {color: purple;}
h6 {color: purple;}
h1, h2, h3, h4, h5, h6 {color: purple;}

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

/* группа 1 */
h1 {color: silver; background: white;}
h2 {color: silver; background: gray;}
h3 {color: white; background: gray;}
h4 {color: silver; background: white;}
b {color: gray; background: white;}
/* группа 2 */
h1, h2, h4 {color: silver;}
h2, h3 {background: gray;}
h1, h4, b {background: white;}
h3 {color: white;}
b {color: gray;}
/* группа 3 */
h1, h4 {color: silver; background: white;}
h2 {color: silver;}
h3 {color: white;}
h2, h3 {background: gray;}
b {color: gray; background: white;}

Любая из этих групп сформирует результат. (Эти стили используют сгруппированные объявления, которые рассматриваются в следующем разделе.)

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор на основании конкретного значения атрибута
Выбор первого дочернего элемента

Вернуться в раздел: CSS / 2. Селекторы