CSS. Каскадные таблицы стилей. Подробное руководство.Символ-Плюс 2008

Группировка

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

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

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

h2₍ р {color:gray;}

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

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

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

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

hi {color: purple;}

h2 {color: purple;}

h3 {color: purple;}

h4 {color: purple;}

h5 {color: purple;}

h6 {color: purple;}

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

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

/* группа 1 */

hi {color:silver; background:white;}