Угрупування і вкладеність

Угрупування

Одні й ті ж властивості можуть бути дані декільком селекторам без необхідності повторювати їх. Для цього селектори треба розділяти комами.

Наприклад, цей код:

h2 {
	color: red;
}

.thisOtherClass {
	color: red;
}

.yetAnotherClass {
	color: red;
}

Можна замінити на цей, більш компактний:

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

Вкладення

У добре структурованої каскадної таблиці стилів немає необхідності застосовувати безліч класів або id селекторів. Це можливо завдяки докладному викладу властивостей селекторів всередині інших селекторів.

Подібний код:

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

#top h1 {
	color: #ff0;
}

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

зменшує необхідність у класах та ідентифікаторах, якщо використовується подібний HTML:

<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>

Це відбувається, коли селектори розділяються пробілами. У результаті h1 всередині id top отримує колір #ff0, а p всередині id top стає red (червоним) і bold (жирне накреслення).

Це може здатися складним (тому, що включає більше, ніж два рівні начебто “це усередині цього усередині цього усередині цього”), а також вимагати практики.