Соседний селектор + позволяет выбрать
элемент по его соседу сверху.
Пример
Давайте обратимся ко всем тегам 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.