Группирование и вложение

Как следует разобравшись в том, что такое HTML селекторы и селекторы классов, можно приступать к освоению некоторых продвинутых методов CSS программирования.

Группирование

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

Например, если у вас есть нечто похожее на

h2 {
   color: red;
}

.thisOtherClass {
   color: red;
}

.yetAnotherClass {
   color: red;
}

то можно сгруппировать все это в один блок декларации

h2, .thisOtherClass, .yetAnotherClass {
   color: red;
}

Вложение

Если CSS хорошо структурирован, то не возникает необходимости в использовании многих селекторов классов и идентификаторов. Это связано с тем, что вы можете определять свойства селекторов внутри других селекторов.

Например,

#top {
   background-color: #ccc;
   padding: 1em;
}

#top h1 {
   color: #ff0;
}

#top p {
   color: red;
   font-weight: bold;
}

Снимает необходимость определять дополнительные классы и идентификаторы, например, в следующем HTML коде:

<div id="top">
   <h1>Шоколадное карри</h1>
   <p>Это мой рецепт карри из одного лишь шоколада</p>
   <p>Ммм мм мммммм</p>
</div>

Это вызвано тем, что, разделив селекторы пробелами, мы говорим "h1 внутри идентификатора top должен быть цвета #ff0" и "p внутри идентификатора top должен быть красным (red) и жирным (bold)".

Все это может показаться несколько сложным (так как здесь задействовано более двух уровней; одно внутри другого, которое внутри еще одного и т.д.), но короткая практика все поставит на место.