Дочерний селектор > позволяет выбирать
элементы по непосредственной вложенности
друг в друга.
Синтаксис
селектор1 > селектор2 {
}
Пример
Давайте обратимся ко всем тегам b,
непосредственно находящимся внутри тегов
p, и покрасим их в красный цвет:
<p>
text <b>+</b>
</p>
<p>
text <i><b>-</b></i>
</p>
p > b {
color: red;
}
:
Пример
Давайте обратимся ко всем тегам b,
непосредственно находящимся внутри элементов
с классом .block, и покрасим их в
красный цвет:
<p class="block">
text <b>+</b>
</p>
<p class="block">
text <i><b>-</b></i>
</p>
<p>
text <b>-</b>
</p>
.block > b {
color: red;
}
:
Пример
Давайте обратимся ко всем элементам с классом
.elem, непосредственно находящимся
внутри элементов с классом .block,
и покрасим их в красный цвет:
<p class="block">
text <span class="elem">+</span>
</p>
<p class="block">
text <i><span class="elem">-</span></i>
</p>
<p class="block">
text <span>-</span>
</p>
<p>
text <span class="elem">-</span>
</p>
.block > .elem {
color: red;
}
:
Смотрите также
-
Контекстный селектор,
который позволяет выбрать элемент по его родителю -
Соседний селектор,
который позволяет выбрать элемент по его соседу -
Родственный селектор,
который позволяет выбрать элементы после заданного -
Универсальный селектор,
который позволяет выбрать все элементы