Calcolatore di specificità dei selettori CSS

Questo calcolatore accetta un selettore, ne convalida la struttura e restituisce il consueto conteggio in quattro parti: stili inline, ID, classi o attributi o pseudoclassi, e tipi di elemento o pseudoelementi. Applica inoltre le regole speciali dei selettori moderni come :is(), :not(), :has(), :where() e :nth-child(). Lei può usarlo per spiegare una sovrascrittura inattesa, confrontare selettori durante un refactoring o aggiungere un controllo affidabile ai Suoi strumenti di sviluppo.

Come leggere il risultato in quattro parti

Il risultato è espresso come (inline, ID, classe, tipo). La prima posizione rappresenta le dichiarazioni di stile inline; poiché lo strumento riceve un selettore e non un attributo style HTML, questo valore è sempre zero. La seconda posizione conta i selettori ID come <code>#checkout</code>. La terza riunisce selettori di classe, selettori di attributo e pseudoclassi, quindi <code>.button</code>, <code>[disabled]</code> e <code>:hover</code> aggiungono un’unità ciascuno. La quarta conta i selettori del tipo di elemento e gli pseudoelementi: <code>button</code> e <code>::before</code> aggiungono entrambi un’unità. I selettori universali e i combinatori non aggiungono nulla. Confronti la tupla da sinistra a destra, senza sommarla come numero decimale: un ID supera qualsiasi quantità di classi e una classe supera qualsiasi quantità di tipi. I campi denominati facilitano l’uso nel codice, mentre l’array di specificità conserva la forma visiva convenzionale. Ricordi che la specificità è soltanto una parte della cascata. Origine, importanza, livelli, prossimità dell’ambito e ordine nel sorgente possono ancora determinare quale dichiarazione prevale in una pagina reale.

Le regole delle pseudoclassi funzionali

Le pseudoclassi funzionali moderne richiedono più del semplice conteggio di ogni token. <code>:is()</code>, <code>:not()</code> e <code>:has()</code> contribuiscono con la specificità del selettore più specifico nella lista degli argomenti; l’involucro non aggiunge peso di classe. Al contrario, <code>:where()</code> contribuisce sempre con zero, anche se l’argomento contiene un ID. Ciò rende <code>:where()</code> utile per le impostazioni predefinite delle librerie che devono restare facili da sovrascrivere. Le pseudoclassi strutturali <code>:nth-child()</code> e <code>:nth-last-child()</code> aggiungono una pseudoclasse e, quando è presente una lista facoltativa dopo <code>of</code>, aggiungono anche il suo membro più specifico. Le altre pseudoclassi funzionali contano a livello di classe, mentre gli pseudoelementi contano a livello di tipo. Il parser riconosce inoltre selettori relativi dentro <code>:has()</code>, caratteri di identificatore con escape, valori di attributo con punteggiatura, namespace e le forme storiche con un solo due punti <code>:before</code>, <code>:after</code>, <code>:first-line</code> e <code>:first-letter</code>. Queste distinzioni rispecchiano il modo in cui gli autori ragionano sul CSS attuale, anziché trattare le parentesi come testo opaco.

Individuare gli errori con la convalida

Un valore di specificità è utile solo quando l’input è un selettore plausibile. Il calcolatore rifiuta quindi campi mancanti, testo vuoto, stringhe incomplete, parentesi tonde o quadre non chiuse, combinatori malformati, identificatori mancanti dopo un punto o un cancelletto e altri errori strutturali. Accetta un selettore alla volta. Una virgola al livello superiore crea una lista i cui membri possono avere specificità diverse; tale input viene rifiutato chiedendo un solo selettore. Calcoli separatamente ogni membro quando confronta una lista di regole. La lunghezza è limitata per mantenere prevedibile l’esecuzione e l’algoritmo non usa sessioni del browser, rete, valori casuali né orologio. Input identici producono così lo stesso JSON nel widget locale, in una chiamata API, in una suite di test o in un controllo di build. Usi il risultato come diagnosi mirata: confronti i selettori coinvolti, quindi esamini i livelli della cascata, <code>!important</code>, l’ereditarietà e l’ordine nel sorgente se la sola specificità non spiega lo stile visualizzato.