Селектор потомков и классы

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

<div class="block"> <h2>заголовок</h2> <p> текст </p> </div> <div class="block"> <h2>заголовок</h2> <p> текст </p> </div>

Давайте выберем все заголовки h2 и абзацы, находящиеся внутри элемента с классом .block, и покрасим их в разные цвета. Используем для этого селектор потомков (который пробел между селекторами):

.block h2 { color: red; } .block p { color: green; }

Дан следующий код:

<p class="eee"> текст <i>курсив</i> </p> <p class="eee"> текст <i>курсив</i> </p> <div class="eee"> текст <i>курсив</i> </div> <div class="eee"> текст <i>курсив</i> </div>

Покрасьте в красный цвет все теги i, находящиеся в элементах с классом eee.

Более сложные комбинации

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

<div class="block"> <h2 class="header">заголовок h2</h2> <p> текст </p> <h3 class="header">заголовок h3</h3> <p> текст </p> <p> текст </p> </div> <div class="block"> <h2 class="header">заголовок h2</h2> <p> текст </p> <h3 class="header">заголовок h3</h3> <p> текст </p> <p> текст </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; }