Lo sapevi che nel codice CSS è possibile utilizzare dei selettori come questi?
ul > li p+p
Che cosa fanno questi selettori CSS? Andiamo ad analizzarli brevemente aiutandoci con delle immagini (tratte da css-trick.com).
Selettore Figlio
Analizziamo l’esempio proposto in figura per capire la differenza tra ul li{} e ul > li {}:
Come si può facilmente capire, utilizzando delle liste, il primo selettore ul li (detto discendente) permette di selezionare tutti gli elementi lista che discendono dal ul. Il secondo selettore ul > li (detto figlio) permette invece di selezionare solo quegli elementi di lista che succedono ad ul. Ovvero, se la lista procede con ad esempio un elemento ol che contiene a sua volta un elemento li, quest’ultimo non verrà considerato. Credo proprio che il grafico sia più esplicativo delle parole 🙂
Selettori Fratello
Prendiamo questo esempio: p + p { font-size: smaller; } si tratta di un selettore fratello adiacente. Con questa tecnica possiamo selezionare tutti gli elementi paragrafo che seguono direttamente un altro paragrafo ed associar loro i gli attributi desiderati. Vediamo l’esempio grafico che ben spiega anche questa possibilità:
Supporto dei Browser
Come vengono supportati i selettori figli e fratelli nei browser? Gli unici problemi riscontrati si hanno da IE7 in giù. Tuttavia per le versione di IE dalla 5.5 alla 7 è stato creato un fix in javascript che vi permette di “aggiustare” questa situazione. Il fix è reperibile qui: http://code.google.com/p/ie7-js/
Alla prossima!
Per un approfondimento sull’uso di selettori particolari ti rimando all’articolo: Selettori CSS poco conosciuti tutti da scoprire
