Calcolatore specificità CSS

Calcola punteggi di specificità del selettore CSS con suddivisione a-b-c

Che cos'è e come funziona?

La specificità CSS è l'algoritmo che i browser usano per decidere quale regola CSS vince quando più regole puntano allo stesso elemento. Viene calcolata come un punteggio in tre parti (A, B, C): A = stili inline, B = ID, C = classi, attributi, pseudo-classi ed elementi.

Questa calcolatrice prende qualsiasi selettore CSS e calcola il suo punteggio di specificità, mostrando la suddivisione (A, B, C).

Casi d'uso

• Debug delle sovrascritture: due regole puntano a .card h2 — una aggiunge colore ma non funziona. Confronta i selettori per trovare quale ha specificità maggiore.
• Evitare refactoring: prima di aggiungere una nuova classe di utilità, verifica che non sia già sovrascritta da un selettore di componente con specificità maggiore.
• Preparazione al colloquio: calcola la specificità di div.container > ul li.active::before.

Domande frequenti

Come viene calcolata esattamente la specificità?

Conta: (stili inline = A), (ID = B), (classi, attributi, pseudo-classi = C), (elementi, pseudo-elementi = C peso inferiore). Un singolo ID batte sempre qualsiasi numero di classi.

Cosa fa !important alla specificità?

!important sovrascrive tutte le regole di specificità e ordine di origine. Usarlo eccessivamente rompe la cascata.

La specificità si applica alle proprietà ereditate?

No. I valori ereditati non hanno specificità — qualsiasi valore impostato esplicitamente sull'elemento vince.

Qual è la specificità di :where() vs :is()?

:where() ha specificità zero. :is() prende la specificità del suo argomento più specifico.

Sviluppatore

Generatore UUID · Convertitore di timestamp · Codificatore Base64 · Decodificatore Base64 · Generatore di hash · Convertitore di colori