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