Quando raggruppi i selettori CSS, applichi gli stessi stili a diversi elementi senza ripetere gli stili nel foglio di stile. Invece di avere due, tre o più regole CSS che fanno la stessa cosa (imposta il colore di qualcosa su rosso, per esempio), usi una singola regola CSS che fa la stessa cosa. Il segreto di questa tattica per aumentare l'efficienza è la virgola.
Come raggruppare i selettori CSS
Per raggruppare i selettori CSS in un foglio di stile, usa le virgole per separare più selettori raggruppati nello stile. In questo esempio, lo stile influisce sugli elementi p e div:
div, p { color: #f00; }
In questo contesto, una virgola significa "e", quindi questo selettore si applica a tutti gli elementi di paragrafo ea tutti gli elementi di divisione. Se mancasse la virgola, il selettore si applicherebbe invece a tutti gli elementi di paragrafo che sono figli di una divisione. Questo è un diverso tipo di selettore, quindi la virgola è importante.
Puoi raggruppare qualsiasi forma di selettore con qualsiasi altro selettore. Questo esempio raggruppa un selettore di classe con un selettore di ID:
p.red, #sub { color: #f00; }
Questo stile si applica a qualsiasi paragrafo con l'attributo class di rosso e qualsiasi elemento (perché il tipo non è specificato) con un attributo ID di sub.
È possibile raggruppare un numero qualsiasi di selettori, inclusi selettori che sono parole singole e selettori composti. Questo esempio include quattro diversi selettori:
p, .red, #sub, div a: link { color: #f00; }
Questa regola CSS si applica a:
- Qualsiasi elemento di paragrafo
- Qualsiasi elemento con la classe di rosso
- Qualsiasi elemento con un ID di sub
- Il collegamento pseudo classe degli elementi di ancoraggio che sono discendenti di una divisione.
L'ultimo selettore è un selettore composto. Come mostrato, è facilmente combinabile con gli altri selettori in questa regola CSS. La regola stabilisce il colore di #f00 (rosso) su questi quattro selettori, che è preferibile scrivere quattro selettori separati per ottenere lo stesso risultato.
Qualsiasi selettore può essere raggruppato
Puoi posizionare qualsiasi selettore valido in un gruppo e tutti gli elementi nel documento che corrispondono a tutti gli elementi raggruppati avranno lo stesso stile in base a quella proprietà di stile.
Alcuni designer preferiscono elencare i elementi raggruppati su righe separate per la leggibilità nel codice. L'aspetto sul sito Web e la velocità di caricamento rimangono invariati. Ad esempio, puoi combinare stili separati da virgole in una proprietà di stile in una riga di codice:
th, td, p.red, div#firstred { color: red; }
oppure puoi elencare gli stili su singole righe per chiarezza:
th,
td,
p.rosso,
div#firstred
{
colore rosso;
}
Perché raggruppare i selettori CSS?
Raggruppare i selettori CSS aiuta a ridurre al minimo le dimensioni del foglio di stile in modo che venga caricato più velocemente. Certo, i fogli di stile non sono i principali responsabili del caricamento lento; I file CSS sono file di testo, quindi anche i fogli CSS molto lunghi sono minuscoli rispetto alle immagini non ottimizzate. Tuttavia, ogni piccola ottimizzazione aiuta, e se riesci a ridurre le dimensioni del tuo CSS e caricare le pagine molto più velocemente, è una buona cosa.
I selettori di raggruppamento semplificano notevolmente anche la manutenzione del sito. Se devi apportare una modifica, puoi semplicemente modificare una singola regola CSS invece di più regole. Questo approccio consente di risparmiare tempo e fatica.
In conclusione: il raggruppamento dei selettori CSS aumenta l'efficienza, la produttività, l'organizzazione e, in alcuni casi, anche la velocità di caricamento.