Selettore child

Per capire il funzionamento di questo e di altri selettori (ma in genere per capire davvero i CSS) è necessario avere ben chiaro il concetto di struttura ad albero del documento. Concetti come ancestor, parent, descendant o child devono diventare il vostro pane quotidiano!

Questa è una parte del codice HTML di questa pagina. In grassetto abbiamo evidenziato i paragrafi che corrispondono alla definizione della regola in quanto figli diretti di un elemento DIV:

<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td><p>Questo è paragrafo.......</p></td>
</tr>
</table>
<div>
<p>Questo paragrafo è "figlio" diretto......</p>
<p>Anche questo paragrafo dovrebbe essere rosso.....</p>
</div>

Notate le relazioni tra i vari elementi per capire l'esempio qui sotto. Questo è invece il codice del CSS:

div > p {
color : Red;
}

p {
color : Black;
}

Come vedete, i paragrafi figli di un elemento div avranno il testo rosso. Tutti gli altri no.

 

Questo è paragrafo è "figlio" diretto di un elemento td: il suo testo è nero

Questo paragrafo è "figlio" diretto dell'elemento div: il testo è rosso....ma se usate Explorer su Windows lo vedrete sempre nero. Perchè non supporta il selettore di tipo child. Provate con altri browser.

Anche questo paragrafo dovrebbe essere rosso: è sempre "figlio" di un div