Соседний селектор + позволяет выбрать элемент по его соседу сверху.
Пример 1
Давайте обратимся ко всем тегам p, непосредственно находящимся после тегов h2, и покрасим их в красный цвет:
h2 + p {
color: red;
}
Результат выполнения кода:
Пример 2
Давайте обратимся ко всем тегам p, непосредственно находящимся после элементов с классом .test, и покрасим их в красный цвет:
<p class="test">
text
</p>
<p>
+
</p>
<p>
-
</p>
.test + p {
color: red;
}
Результат выполнения кода:
Пример3
Давайте обратимся ко всем элементам с классом .elem, непосредственно находящимся после элементов с классом .test, и покрасим их в красный цвет:
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
.test + .elem {
color: red;
}
Результат выполнения кода: