Селектор сестринских елемената у ЦСС-у

Селектор сестринских елемената ~ омогућава одабир свих елемената који се налазе након задатог елемента унутар истог родитеља.

Синтакса

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

Хајде да се обратимо свим таговима p, који се налазе након тагова h2, и обојимо их у црвену боју:

<div>
	<h2>текст</h2>
	<p>
		+
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Хајде да се обратимо свим таговима p, који се налазе након елемената са класом .test, и обојимо их у црвену боју:

<div>
	<p class="test">
		текст
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

.test ~ p {
	color: red;
}

Хајде да се обратимо свим елементима са класом .elem, који се налазе након елемената са класом .test, и обојимо их у црвену боју:

<div>
	<p class="test">
		текст
	</p>
	<p class="elem">
		+
	</p>
	<p>
		-
	</p>
	<p class="elem">
		+
	</p>
</div>
<p>
	-
</p>

.test ~ .elem {
	color: red;
}

Селектор директног детета,
који омогућава одабир елемената по непосредној угњежђености
Контекстуални селектор,
који омогућава одабир елемента према његовом родитељу
Селектор непосредног суседа,
који омогућава одабир елемента према његовом суседу
Универзални селектор,
који омогућава одабир свих елемената