Selectorul adiacent în CSS

Selectorul adiacent + vă permite să selectați un element în funcție de vecinul său de deasupra.

Sintaxă

selector1 + selector2 {
	
}

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

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

h2 + p {
	color: red;
}

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

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

.test + p {
	color: red;
}

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

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

.test + .elem {
	color: red;
}

Selectorul copil,
care vă permite să selectați elementele după încorporarea imediată
Selectorul contextual,
care vă permite să selectați un element după părintele său
Selectorul frate general,
care vă permite să selectați elementele după cel dat
Selectorul universal,
care vă permite să selectați toate elementele