Cos'è la specificità in CSS?

La specificità in CSS è un meccanismo che determina quale regola di stile verrà applicata a un elemento se ci sono più regole applicabili.

Ogni selettore ha il suo punteggio di specificità. Un punteggio più alto indica una priorità più alta.

Il calcolo della specificità si basa sulla quantità dei seguenti componenti nel selettore (in ordine decrescente di importanza):

• Centinaia (1000): Regole con !important (hanno la priorità più alta, ma il loro uso non è raccomandato).
• Centinaia (100): Stili inline (scritti direttamente nell’attributo style dell’elemento HTML).
• Centinaia (100): Identificatori (selettori per id, ad esempio #mio-elemento).
• Decine (10): Classi (selettori per .classe), pseudoclassi (ad esempio :hover, :focus), attributi (ad esempio [type="text"]).
• Unità (1): Tipi di elementi (nomi di tag HTML, ad esempio div, p), pseudoelementi (ad esempio ::before, ::after).
• Zero (0): Selettore universale (*), combinatori (>, +, ~), selettori parent (:not(), :is(), :where()) non aggiungono specificità di per sé, ma possono influenzare la specificità all’interno delle parentesi.

Esempio di calcolo:

• p { ... } - Specificità: 0-0-0-1
• .mia-classe { ... } - Specificità: 0-0-1-0
• #mio-id { ... } - Specificità: 0-1-0-0
• div.mia-classe { ... } - Specificità: 0-0-1-1
• ul > li.elemento[data-id="1"] { ... } - Specificità: 0-0-2-2 (li, ul = 2; .elemento, [data-id="1"] = 2)

Se due regole hanno la stessa specificità, si applica quella che si trova più in basso nel file CSS.

Esempio:

/* File style.css */
.mio-elemento {
  colore: blu; /* Specificità: 0-0-1-0 */
}

#elemento-id {
  colore: rosso; /* Specificità: 0-1-0-0 */
}

.mio-elemento {
  font-weight: bold; /* Specificità: 0-0-1-0, sovrascrive la regola precedente con la stessa specificità */
}

In questo caso, il testo dell’elemento con id elemento-id sarà rosso, e il testo dell’elemento con classe mio-elemento sarà blu e in grassetto (il blu viene sovrascritto dal rosso a causa della maggiore specificità di #elemento-id).

Comprendere la specificità è importante per scrivere CSS prevedibile e facile da mantenere. Evitare specificità eccessivamente complesse e l’uso di !important per una migliore gestione degli stili.