Cosa sai sulla specificità dei selettori CSS…

La specificità determina la priorità delle regole CSS in caso di conflitto, quando diversi stili vengono applicati allo stesso elemento. Viene calcolata per ogni selettore nella regola.

La specificità è una valutazione numerica composta da quattro categorie (A, B, C, D), scritta come 0,0,0,0. Più alto è il numero, maggiore è la specificità.

Categorie:

A (stile inline): Stili definiti dall'attributo style nell'elemento HTML. Hanno la massima specificità (ad esempio, 1,0,0,0).
B (ID): Selettori per ID (ad esempio, #mio-id). Aumentano il secondo numero (ad esempio, 0,1,0,0).
C (Classe, Attributo, Pseudo-classe): Selettori per classe (ad esempio, .mia-classe), attributo (ad esempio, [type="text"]), pseudo-classe (ad esempio, :hover, :first-child). Aumentano il terzo numero (ad esempio, 0,0,1,0).
D (Elemento, Pseudo-elemento): Selettori per tag HTML (ad esempio, div, p) e pseudo-elementi (ad esempio, ::before, ::after). Aumentano il quarto numero (ad esempio, 0,0,0,1).

Esempio di calcolo:

p - 0,0,0,1
.mia-classe - 0,0,1,0
#mio-id - 0,1,0,0
div p - 0,0,0,2 (somma delle specificità di due elementi)
#mio-id .mia-classe - 0,1,1,0 (somma di ID e classe)
div#mio-id.mia-classe:hover - 0,1,2,1 (somma di tag, ID, classe e pseudo-classe)

Regole:

La specificità dello stile inline è sempre superiore a qualsiasi combinazione di altri selettori, tranne le regole con il flag !important.
Le regole con il flag !important hanno la priorità più alta, sovrascrivendo anche lo stile inline. L'uso di !important non è raccomandato a causa della complessità del debug.
In caso di stessa specificità, si applica la regola dichiarata per ultima nel file CSS.
Il selettore universale (*) e :where() hanno una specificità di 0,0,0,0 e non aumentano la specificità totale.

/*
  Specificità: 0,0,0,1
  Si applica se non ci sono regole più specifiche
*/
p {
  color: blue;
}

/*
  Specificità: 0,0,1,0
  Sovrascrive la regola per il tag p
*/
.text {
  color: green;
}

/*
  Specificità: 0,1,0,0
  Sovrascrive la regola per la classe .text
*/
#testo-principale {
  color: red;
}

/*
  Specificità: 1,0,0,0
  Si applica se l'elemento ha l'attributo style="color: purple;"
*/
/* <p style="color: purple;">Testo</p> */

/*
  Specificità molto alta, sovrascrive tutto
  Non si consiglia di usarla senza estrema necessità
*/
.override-text {
  color: black !important;
}

Cosa sai sulla specificità dei selettori CSS?