Родственный селектор ~
позволяет выбрать
все элементы, находящиеся после заданного
элемента внутри одного родителя.
Пример
Давайте обратимся ко всем тегам p
,
находящимся после тегов h2
, и покрасим
их в красный цвет:
<div>
<h2>text</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Пример
Давайте обратимся ко всем тегам p
,
находящимся после элементов с классом .test
,
и покрасим их в красный цвет:
<div>
<p class="test">
text
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
Пример
Давайте обратимся ко всем элементам с классом
.elem
, находящимся после элементов
с классом .test
, и покрасим их в красный
цвет:
<div>
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
Практические задачи
Дан код:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li id="elem">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
Напишите селектор, который выберет все элементы,
находящийся сразу после элемента #elem
.