Selettore figlio in CSS

Il selettore figlio > consente di selezionare gli elementi in base all'annidamento diretto l'uno nell'altro.

Sintassi

selettore1 > selettore2 {
	
}

Esempio

Accediamo a tutti i tag b che si trovano direttamente all'interno dei tag p e coloriamoli in rosso:

<p>
	text <b>+</b>
</p>
<p>
	text <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Esempio

Accediamo a tutti i tag b che si trovano direttamente all'interno degli elementi con classe .block e coloriamoli in rosso:

<p class="block">
	text <b>+</b>
</p>
<p class="block">
	text <i><b>-</b></i>
</p>
<p>
	text <b>-</b>
</p>

.block > b {
	color: red;
}

Esempio

Accediamo a tutti gli elementi con classe .elem, che si trovano direttamente all'interno degli elementi con classe .block, e coloriamoli in rosso:

<p class="block">
	text <span class="elem">+</span>
</p>
<p class="block">
	text <i><span class="elem">-</span></i>
</p>
<p class="block">
	text <span>-</span>
</p>
<p>
	text <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

Vedi anche

Selettore discendente,
che consente di selezionare un elemento in base al suo genitore
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