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

Группировка

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

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

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

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