Пусть у нас есть следующий код:
<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;
}