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

Сестринские элементы в CSS. Картинка 1.

Рассмотрим на схеме «Картинка 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 {
    ...
}

Похожие уроки Codebra

1. Сделайте цвет текста Текст 3 красного цвета. HTML код менять нельзя. Используйте теорию из этого урока.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.