Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

CSS: il selettore child

Scritto da Fare-internet il 12 ottobre 2010 condividi condividi

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

<div class="myClass">
  <p>Io sarò verde</p>
  <p>Anche io</p>
  <div class="tag">
     <p>Io sarò rosso</p>
  </div>
</div>


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.

Tag: ,  

Twitter