Selectorul frate în CSS

Selectorul frate ~ vă permite să selectați toate elementele care se află după un element dat în același părinte.

Sintaxă

selector1 ~ selector2 {
	
}

Să ne adresăm tuturor tag-urilor p care se află după tag-urile h2 și să le colorăm în roșu:

<div>
	<h2>text</h2>
	<p>
		+
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Să ne adresăm tuturor tag-urilor p care se află după elementele cu clasa .test, și să le colorăm în roșu:

<div>
	<p class="test">
		text
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

.test ~ p {
	color: red;
}

Să ne adresăm tuturor elementelor cu clasa .elem, care se află după elementele cu clasa .test, și să le colorăm în roșu:

<div>
	<p class="test">
		text
	</p>
	<p class="elem">
		+
	</p>
	<p>
		-
	</p>
	<p class="elem">
		+
	</p>
</div>
<p>
	-
</p>

.test ~ .elem {
	color: red;
}

Selectorul copil,
care vă permite să selectați elementele după imbricarea directă
Selectorul contextual,
care vă permite să selectați un element după părintele său
Selectorul adiacent,
care vă permite să selectați un element după vecinul său
Selectorul universal,
care vă permite să selectați toate elementele