Il selettore universale

22 Dic

Out Of Date Warning

Questo post è stato pubblicato più di 2 anni fa (il 22 dicembre 2011). Le idee vanno avanti velocemente, le prospettive cambiano quindi i contenuti potrebbero non essere aggiornati. Ti prego di tenere in considerazione questo, e di verificare le informazioni tecniche presenti nell'articolo prima di farne affidamento per i tuoi scopi.

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:

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:

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:

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:

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

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