Группирование. CSS. Учебник от Маржевича

При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды 1 и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 17.1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.

Пример 17.1. Стиль для каждого селектора

h1{font-family:arial;font-size:160%;color:#003}
H2{font-family:arial;font-size:135%;color:#333}
H3{font-family:arial;font-size:120%;color:#900}
P{font-family:serif}

Из данного примера видно, что стиль для тегов заголовков содержит одинаковое значение font-family. Группирование как раз и позволяет установить 1 свойство сразу для нескольких селекторов, как показано в примере 17.2.

Пример 17.2. Сгруппированные селекторы

h1,H2,H3{font-family:arial}
h1{font-size:160%;color:#003}
H2{font-size:135%;color:#333}
H3{font-size:88%;color:#900}

В данном примере font-family единое для всех селекторов применяется сразу к нескольким тегам, а индивидуальные свойства уже добавляются к каждому селектору отдельно.

Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий.

Селектор 1, Селектор 2, …Селектор N {Описание правил стиля}

При такой записи правила стиля применяются ко всем селекторам, перечисленным в 1 группе.