Споріднений селектор ~ дозволяє вибрати
всі елементи, що знаходяться після заданого
елемента всередині одного з батьків.
Приклад
Давайте звернемося до всіх тегів 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.