Selettore di elemento figlio CSS

In confronto con il selettore discendente, il selettore di figlio (Child selectors) può selezionare solo gli elementi che sono figli di un elemento specifico.

Selezionare il figlio

Se non si desidera selezionare qualsiasi elemento discendente, ma si desidera restringere l'intervallo, selezionare solo i figli di un elemento specifico, utilizzare il selettore di figlio (Child selector).

Ad esempio, se si desidera selezionare solo gli elementi <strong>strong</strong> che sono figli degli elementi <h1>, si può scrivere così:

h1 > strong {color:red;}

Questa regola trasformerà i due elementi <strong>strong</strong> sotto il primo <h1>in rosso, ma l'elemento <strong>strong</strong> del secondo <h1>non sarà influenzato:

<h1>Questo è <strong>molto</strong> <strong>molto</strong> importante.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

Prova a farlo tu stesso

Spiegazione della grammatica

Dovresti aver notato che il selettore figlio utilizza il segno di maggiore (simbolo figlio).

Sul lato sinistro e destro del simbolo figlio possono esserci spazi bianchi, che sono opzionali. Pertanto, qualsiasi delle seguenti scritture è corretta:

h1 > strong
h1> strong
h1 >strong
h1>strong

Se letta da destra a sinistra, il selettore h1 > strong può essere interpretato come "Seleziona tutti gli elementi strong che sono figli degli elementi h1".

Combinazione di selettore discendente e selettore figlio

Vediamo questa selezione qui sotto:

table.company td > p

La selezione di sopra selezionerà tutti gli elementi p che sono figli degli elementi td, il quale stesso eredita da un elemento table che ha un attributo di classe contenente company.