Группировка и вложенность

Переклад українською: Угрупування і вкладеність

Группировка

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

Например, этот код:

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 (жирное начертание).

Это может показаться сложным (потому, что включает больше, чем два уровня вроде «это внутри этого внутри этого внутри этого») и может потребовать практики.

← Элемент Flow | Div и Span →