Calcolatore specificità CSS

a,b,c,d - selettori CSS - cascata

Inserisci uno o più selettori CSS e ottieni il punteggio di specificità (a,b,c,d) con breakdown per componente. Confronta due selettori per capire quale prevale nella cascade.

Selettori da calcolare
Analisi specificita
A - Inline styles
style="..." direttamente nell HTML. Valore: 1,0,0,0
B - ID
#id - Un ID per elemento. Valore: 0,1,0,0
C - Classi / Attr / Pseudo
.class [attr] :hover :focus. Valore: 0,0,1,0
D - Elementi / Pseudo-el.
div p h1 ::before ::after. Valore: 0,0,0,1
Confronto selettori
Esempi

La specificità CSS è uno dei concetti più fraintesi nello sviluppo front-end: capire perché uno stile sovrascrive un altro — o perché !important non dovrebbe essere la soluzione di default — fa la differenza tra un foglio di stile manutenibile e un codice pieno di override accumulati nel tempo.

Questo calcolatore di specificità CSS ti permette di:

  • Analizzare selettori semplici e complessi (classi, id, pseudo-classi, pseudo-elementi, attributi)
  • Visualizzare il punteggio in formato (a, b, c, d) con breakdown per tipo di selettore
  • Confrontare due selettori per determinare quale ha priorità in caso di conflitto
  • Identificare selettori ad alta specificità che potrebbero creare problemi di scalabilità

Indispensabile quando si lavora su temi WordPress con stili provenienti da plugin, temi parent/child o componenti Gutenberg, dove i conflitti di specificità sono frequenti. Utile in fase di code review o quando si eredita un progetto da refactoring.

Come leggere la specificità CSS

  • A rappresenta gli stili inline.
  • B conta i selettori ID.
  • C conta classi, attributi e pseudo-classi.
  • D conta elementi e pseudo-elementi.

Il confronto avviene in ordine lessicografico da sinistra a destra: prima A, poi B, poi C e infine D.