CSS: il selettore child

Loading

Tramite il selettore child (figlio in inglese) possiamo applicare delle regole css solo a elementi che sono direttamente discedenti da un altro.
Il per selezionare i diretti discendenti utilizzeremo il carattere >.

Vediamo un esempio che chiarirà molti punti, partiamo dall’HTML

Io sarò verde

Anche io

Io sarò rosso


Ora vediamo le regole CSS:

p {color: #f00}
.myClass > p {color: #0f0}

Provate a fare copia e incolla su una pagina HTML e potrete vedere il risultato.
Il simbolo > della regola .myClass > p sta a significare che le caratteristiche specificate devono essere applicate solo ai paragrafi direttamente contenuti in un elemento con classe .myClass, per il paragrafo contenuto dentro <div class=”tag”> viene meno la discendenza diretta, e quindi il testo risulterà rosso in accordanza con la regola p {color: #f00}.
Se avessimo scritto: .myClass p {color: #0f0} tutti i paragrafi avrebbero avuto il testo rosso.