Categorie
CSS

Il selettore universale

Il selettore universale, rappresentato da un l’asterisco (*) ci permette di selezionare ogni elemento del documento per applicarvi degli stili.
Vediamo un esempio banale, supponiamo che vogliamo fare in modo che tutti gli elementi del documento siano di colore rosso:

* {color: red;}

Se il selettore universale * non è l’unico componente di una sequenza di selettori semplici oppure è immediatamente seguito da uno pseudo-elemento, allora potrà essere omesso, le seguenti coppie di regole sono equivalenti:

*[hreflang|=it] /* equivale a */ 
[hreflang|=it]

*.miaClasse /* equivale a */
.miaClasse

*#mioId /* equivale a */ 
#mioId

Un po’ più a fondo

Tuttavia dobbiamo considerare gli effetti nel caso in cui il selettore universale sia parte di un selettore contestuale. Poniamo che desideriamo che tutti gli elementi discendenti di un <div> con id mioId siano di colore grigio:

div#mioId * {color: gray;}	

Attenzione nell’esempio precedente avranno il testo di colore grigio tutti gli elementi discendenti dal <div> con id mioId, eventuale testo inserito direttamente all’interno del contenitore in questione sarà esente dalla regola. In caso contrario avremmo dovuto scrivere:

* div#mioId {color: gray;}	

Vediamo ora un altro esempio ancora più complesso, ma che ci dovrebbe schiarire ulteriormente le idee su l’utilizzo del selettore universale:

body * * table * ul {border-left: 1px solid red;}

Nell’esempio qualsiasi elemento <ul> discendente da qualsiasi elemento discendente da un elemento <table> discendente da qualsiasi elemento discendente da qualsiasi elemento discendente da un elemento <body>, avrà il bordo sinistro rosso.
Tenete presente che l’elemento universale ha uno specificità uguale a 0,0,0,0 quindi div * avrà una specificità di 0,0,0,1 mentre div a avrà una specificità uguale a 0,0,0,2. Mentre entrambe le regole andranno a matchare una qualsiasi ancora all’interno di un div, la seconda regola avrà una specificità maggiore.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.