Оглавление

Контекстные селекторы

Если на панели расположено несколько абзацев, можно добавить атрибут класса каждому открывающему тегу <p>. Однако гораздо лучше указать атрибут class со значением sidebar для элемента, служащего контейнером, а затем изменить цвет каждого расположенного внутри контейнера элемента p на белый. Для этого достаточно написать всего одно правило стиля с использованием контекстного селектора (селектора-потомка).


Ниже приведено правило с новым селектором:


p {
color: #0000FF;
}
.sidebar p {
color: #FFFFFF;
}

А так выглядит обновленный HTML-код:


<div class="sidebar">
<p>Этот параграф будет белым цветом.</p>
<p>Этот тоже.</p>
</div>


Как видите, контекстный селектор состоит из списка селекторов, разделенных пробелами, соответствующих элементам страницы от внешних к внутренним. В данном случае на странице имеется элемент div класса sidebar, и контекстный селектор .sidebar p ссылается на все элементы p, расположенные внутри этого div.

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити