Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по 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 {
...
}Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.
