Как следует разобравшись в том, что такое 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)".
Все это может показаться несколько сложным (так как здесь задействовано более двух уровней; одно внутри другого, которое внутри еще одного и т.д.), но короткая практика все поставит на место.