106. Структура документа: сестринские элементы в CSS

Рассмотрим на схеме «Картинка 1
», что такое сестринские элементы в CSS. На данном рисунке сестринскими элементами являются списки (ol
и ul
), в каждом списке, элементы li
между собой тоже являются сестринскими. Но стоит обратить внимание на то, что элементы li
из списка ol
, не являются сестринскими по отношению к элементам li
из списка ul
. Кстати, HTML код данной схемы смотрите в первом примере.
<div>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Теперь давайте выберем элемент b
, но только тот, который находится после элемента p
(сестринский элемент). В примере втором HTML код. В третьем примере CSS код. Кстати, для выбора сестринского элемента используется знак (символ) +
.
<p>Текст 1</p>
<b>Текст 2</b>
<b>Текст 3</b>
<p>Текст 4</p>
p + b {
color: red;
}
Текст 2
будет красного цвета, а Текст 3
так и останется черным (он не является сестринским). Рассмотрим четвертый пример.
b + p {
color: red;
}
Теперь Текст 4
будет красного цвета. Стоит понимать, что можно писать так же, как и пятом примере.
p + b + b {
color: red;
}
Сестринские, дочерние и прочие селекторы можно комбинировать, например, вот как в примере шесть.
div > span + ul li {
...
}
Похожие уроки и записи блога
- Сделайте цвет текста
Текст 3
красного цвета. HTML код менять нельзя. Используйте теорию из этого урока.
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Это займет не больше минуты.