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;
}
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