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

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

H1 {
		  font-family: Arial, Helvetica, sans-serif;
		  font-size: 160%;
		  color: #003;
		}
		H2 {
		  font-family: Arial, Helvetica, sans-serif;
		  font-size: 135%;
		  color: #333;
		}
		H3 {
		  font-family: Arial, Helvetica, sans-serif;
		  font-size: 120%;
		  color: #900;
		}
		P {
		  font-family: Times, serif;
		}

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

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

H1, H2, H3 {
		  font-family: Arial, Helvetica, sans-serif;
		}
		H1 {
		  font-size: 160%;
		  color: #003;
		}
		H2 {
		  font-size: 135%;
		  color: #333;
		}
		H3 {
		  font-size: 120%;
		  color: #900;
		}

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

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

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

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

Вопросы для проверки

1. Какой цвет фона будет у элемента с классом button при включении приведённого стиля?

.bgzapas, .button, h1 {
		  font-size: 1.2em;
		  padding: 10px;
		  background-color: #fcfaed;
		}
		.bgzapas {
		  background-color: #e7f2d7;
		}
		.button, h2 {
		  width: 95px;
		  font-size: 11px;
		  color: #f3fced;
		  background-color: #5ca22e;
		}
		.bgzapas, .button {
		  background-color: #d9d7f2;
		}

1. #fcfaed
2. #e7f2d7
3. #f3fced
4. #5ca22e
5. #d9d7f2

Ответы

5. #d9d7f2