Sousední selektor v CSS

Sousední selektor + umožňuje vybrat prvek na základě jeho bezprostředního předchůdce.

Syntaxe

selektor1 + selektor2 {
	
}

Pojďme oslovit všechny tagy p, které bezprostředně následují za tagy h2, a obarvíme je na červeno:

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

h2 + p {
	color: red;
}

Pojďme oslovit všechny tagy p, které bezprostředně následují za prvky s třídou .test, a obarvíme je na červeno:

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

.test + p {
	color: red;
}

Pojďme oslovit všechny prvky s třídou .elem, které bezprostředně následují za prvky s třídou .test, a obarvíme je na červeno:

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

.test + .elem {
	color: red;
}

Dceřiný selektor,
který umožňuje vybrat prvky na základě přímého vnoření
Kontextový selektor,
který umožňuje vybrat prvek na základě jeho rodiče
Selektor obecného sourozence,
který umožňuje vybrat prvky následující za zadaným
Univerzální selektor,
který umožňuje vybrat všechny prvky