I selettori figlio sono stati introdotti con i CSS2 e sono utilizzati per selezionare gli elementi che sono direttamente figli di un’altro elemento. Si differenziano dai descendant selector che vanno a matchare tutti gli elementi contenuti all’interno di un’altro elemento (discendenti), indipendentemente dal livello in cui si trovano.
Come funzionano
Consideriamo questa regola CSS:
#side div {color: red;}
La regola renderà rosso il testo di qualsiasi di div all’interno dell’elemento con id uguale a side. Tuttavia questo potrebbe non essere quello che noi vogliamo, per esempio avremmo potuto desiderare di applicare la regola soltanto ai div direttamente figli e non a tutti in modo arbitrario. In questo caso avremmo dovuto utilizzare un child selector:
#side>div {color: red;}
La sintassi è intuitiva, basta aggiungere un combinatore tra i due elementi, in questo caso il simbolo maggiore (>). Possiamo inserire anche degli spazi bianchi tra il combinatore e gli elementi (#side > div).
Un esempio un po’ più realistico, cosideriamo questo blocco di markup:
<ol>
<li>Item 1</li>
<li>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
</ol>
supponiamo che si vuole selezionare tutti gli elementi (li) figli non discendenti di una lista ordinata. Quindi non vogliamo selezionare anche gli elementi della lista non ordinata contenuta al suo interno. Per farlo anche in qesto caso dobbiamo utilizzare un child selector:
ol>li {list-style-type: decimal-leading-zero;}
Se togliamo il combinatore, la regola verrà applicata a qualsiasi elemento della lista che discende da un ol, anche se queste sono le voci di un elenco nidificato in lista non ordinata.
Supporto
I selettori figlio sono supportati praticamente d tutti i browsers ad eccezione di IE6 e precedenti. Se si volesse dare supporto anche a questi browsers può venirci incontri IE9.js di cui ho già parlato in questo mio articolo.
Nel caso in cui non volessimo utilizzare JavaScript allora possiamo simulare il comportamento della child selection tramite il selettore universale.
Supponiamo di voler applicare un bordo rosso attorno al div figlio di un elemento con id uguale a footer:
#footer div {border: 1px solid red;}
#footer * div {border: none}
Quello che abbiamo fatto con la prima regola è applicare il bordo a tutti i div discendenti. Con la seconda regola, attraverso il selettore universale, abbiamo tolto il bordo a tutti i div discendenti da qualsiasi elemento discendente da un elemento id uguale a footer.
Il risultato finale è esattamente lo stesso di un child selector. Inoltre entrambe le regole hanno la stessa specificità quindi l’ultima dichiarata vince.
Questo trucco tuttavia se applicato su proprietà che si ereditano può portare a risultati inattesi. La seconda regola, quella con il selettore universale potrebbe andare a vanificare altre regole. Il consiglio è quindi eventualmente di applicarlo solo a proprietà non ereditate come margin, padding, background, display, border etc..
La tabella su w3.org/TR/CSS2/propidx.html può aiutarci a capire se una proprietà è ereditata o meno.