Selettore contestuale in CSS

Il selettore contestuale, rappresentato dal comando spazio (' '), consente di selezionare i tag annidati in un genitore specificato

Sintassi

selettore1 selettore2 {
	
}

Rivolgiamoci a tutti i tag p all'interno dei tag div e coloriamoli in rosso:

<div>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

div p {
	color: red;
}

Rivolgiamoci a tutti i tag p all'interno dell'elemento con #elem e coloriamoli in rosso:

<div id="elem">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

#elem p {
	color: red;
}

Rivolgiamoci a tutti i tag p all'interno degli elementi con classe .block e coloriamoli in rosso:

<div class="block">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

.block p {
	color: red;
}

Rivolgiamoci a tutti i tag b all'interno dei tag p, che si trovano a loro volta all'interno dei tag div e coloriamoli in rosso:

<div>
	<p>
		text <b>+</b>
	</p>
</div>

div p b {
	color: red;
}

Selettore figlio,
che consente di selezionare gli elementi per annidamento diretto
Selettore adiacente,
che consente di selezionare un elemento in base al suo vicino
Selettore generale di fratelli,
che consente di selezionare gli elementi dopo quello specificato
Selettore universale,
che consente di selezionare tutti gli elementi