Соседний селектор в CSS

Соседний селектор + позволяет выбрать элемент по его соседу сверху.

Синтаксис

селектор1 + селектор2 {
	
}

Давайте обратимся ко всем тегам 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;
}

Дочерний селектор,
который позволяет выбрать элементы по непосредственной вложенности
Контекстный селектор,
который позволяет выбрать элемент по его родителю
Родственный селектор,
который позволяет выбрать элементы после заданного
Универсальный селектор,
который позволяет выбрать все элементы