# Сложные комбинации селектора потомков и классов в CSS

Пусть теперь у нас есть следующий код:

`<div class="block"> <h2 class="header">Title h2</h2> <p> text </p> <h3 class="header">Title h3</h3> <p> text </p> <p> text </p> </div> <div class="block"> <h2 class="header">Title h2</h2> <p> text </p> <h3 class="header">Title h3</h3> <p> text </p> <p> text </p> </div>`

Давайте найдем все элементы с классом `header`, находящиеся внутри элемента с классом `block`, и зададим им шрифт `Arial`:

`.block .header { font-family: Arial; }`

Как видно в HTML коде, внутри элемента с классом `block` элементы с классом `header` могут быть как заголовками `h2`, так и заголовками `h3`. Давайте напишем селекторы, отличающие эти заголовки, и что-нибудь сделаем с этими заголовками.

Давайте выберем все `h2` с классом `header`, находящиеся внутри элемента с классом `block`:

`.block h2.header { font-size: 30px; color: red; }`

А теперь выберем все `h3` с классом `header`, находящиеся внутри элемента с классом `block`:

`.block h3.header { font-size: 20px; color: green; }`

Давайте соберем весь наш CSS вместе:

`.block .header { font-family: Arial; } .block h2.header { font-size: 30px; color: red; } .block h3.header { font-size: 20px; color: green; }`

Применим его к нашему HTML коду:

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

`.eee .bbb { color: red; }`

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

`.eee h2 { color: red; }`

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

`.eee h2.bbb { color: red; }`

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

`.eee h3.bbb { color: red; }`

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

`.eee p.bbb { color: red; }`

Расскажите, что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот селектор. Вот код с селектором:

`.eee .bbb .kkk { color: red; }`
← →
↑