Сусідний селектор + дозволяє вибрати
елемент по сусіду зверху.
Приклад
Давайте звернемося до всіх тегів p,
безпосередньо після тегів h2,
і пофарбуємо їх у червоний колір:
<h2>text</h2>
<p>
+
</p>
<p>
-
</p>
<p>
-
</p>
h2 + p {
color: red;
}
:
Приклад
Давайте звернемося до всіх тегів p,
безпосередньо таким, що знаходиться після елементів
з класом .test, і пофарбуємо їх у червоний
колір:
<p class="test">
text
</p>
<p>
+
</p>
<p>
-
</p>
.test + p {
color: red;
}
:
Приклад
Давайте звернемося до всіх елементів із класом
.elem, що безпосередньо знаходиться
після елементів з класом .test, та
пофарбуємо їх у червоний колір:
<p class="test">
text
</p>
<p class="elem">
+
</p>
<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.
Дан код:
<ul>
<li>1</li>
<li class="elem">2</li>
<li>3</li>
<li>4</li>
<li class="elem">5</li>
<li>6</li>
<li>7</li>
<li class="elem">8</li>
<li>9</li>
</ul>
Напишіть селектор, який вибере елементи,
що знаходяться відразу після елементів .elem.