Родственный селектор в CSS

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

Синтаксис

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

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

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