Selettore adiacente in CSS

Il selettore adiacente + permette di selezionare un elemento in base al suo vicino superiore.

Sintassi

selettore1 + selettore2 {
	
}

Esempio

Applichiamo uno stile a tutti i tag p che si trovano direttamente dopo i tag h2 e coloriamoli in rosso:

<h2>testo</h2>
<p>
	+
</p>
<p>
	-
</p>
<p>
	-
</p>

h2 + p {
	color: red;
}

Esempio

Applichiamo uno stile a tutti i tag p che si trovano direttamente dopo gli elementi con classe .test e coloriamoli in rosso:

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

.test + p {
	color: red;
}

Esempio

Applichiamo uno stile a tutti gli elementi con classe .elem, che si trovano direttamente dopo gli elementi con classe .test, e coloriamoli in rosso:

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

.test + .elem {
	color: red;
}

Vedi anche

Selettore figlio,
che permette di selezionare gli elementi per nidificazione diretta
Selettore contestuale,
che permette di selezionare un elemento in base al suo genitore
Selettore generale di fratelli,
che permette di selezionare gli elementi dopo quello specificato
Selettore universale,
che permette di selezionare tutti gli elementi