Угрупування і вкладеність
Русский перевод: Группировка и вложенность
Угрупування
Одні й ті ж властивості можуть бути дані декільком селекторам без необхідності повторювати їх. Для цього селектори треба розділяти комами.
Наприклад, цей код:
01
h2 {
02
color: red;
03
}
04
05
.thisOtherClass {
06
color: red;
07
}
08
09
.yetAnotherClass {
10
color: red;
11
}
Можна замінити на цей, більш компактний:
1
h2, .thisOtherClass, .yetAnotherClass {
2
color: red;
3
}
Вкладення
У добре структурованої каскадної таблиці стилів немає необхідності застосовувати безліч класів або id селекторів. Це можливо завдяки докладному викладу властивостей селекторів всередині інших селекторів.
Подібний код:
01
#top {
02
background-color: #ccc;
03
padding: 1em
04
}
05
06
#top h1 {
07
color: #ff0;
08
}
09
10
#top p {
11
color: red;
12
font-weight: bold;
13
}
зменшує необхідність у класах та ідентифікаторах, якщо використовується подібний HTML:
1 <div id="top"> 2 <h1>Chocolate curry</h1> 3 <p>This is my recipe for making curry purely with chocolate</p> 4 <p>Mmm mm mmmmm</p> 5 </div>
Це відбувається, коли селектори розділяються пробілами. У результаті h1 всередині id top отримує колір #ff0, а p всередині id top стає red (червоним) і bold (жирне накреслення).
Це може здатися складним (тому, що включає більше, ніж два рівні начебто “це усередині цього усередині цього усередині цього”), а також вимагати практики.