Come calcolare la specificità di un selettore CSS

Prima di iniziare: che cosa misura il risultato

La specificità CSS è un modo per descrivere il peso relativo di un selettore nel calcolo prodotto dallo strumento. Il calcolatore riceve facoltativamente il testo di un selettore e restituisce quattro componenti insieme a un punteggio numerico, così puoi esaminare la composizione di una regola senza sommare manualmente i suoi elementi. È utile quando stai verificando un selettore prima di confrontarlo con un altro o quando vuoi capire quali parti del testo vengono riconosciute dal conteggio.

Il campo può essere lasciato senza contenuto: il suo valore predefinito è una stringa vuota. Per un selettore non vuoto, il risultato include anche una rappresentazione che conserva il testo inviato. Questa informazione ti permette di associare il calcolo al caso che avevi intenzione di controllare, soprattutto quando analizzi più selettori in successione.

Il risultato va letto come il calcolo effettuato sul testo fornito, non come una valutazione generale di ogni aspetto delle regole CSS. Le categorie riconosciute e il modo in cui vengono pesate sono quelli previsti dal calcolatore.

Procedura per analizzare un selettore

1. Prepara il testo del selettore che vuoi esaminare, come #intestazione, .scheda oppure una combinazione di più elementi. Inserisci il contenuto nel campo dedicato senza sostituirlo con il nome della regola o con il relativo blocco di dichiarazioni.

2. Avvia l'operazione tramite il controllo disponibile nell'interfaccia. Se il testo contiene caratteri iniziali o finali che vuoi verificare, osserva la rappresentazione restituita: per un input non vuoto, essa mantiene il selettore inviato.

3. Esamina le quattro componenti nell'ordine visualizzato. La prima aumenta quando vengono rilevati token simili agli identificatori; la seconda considera token simili alle classi, oltre agli attributi e alle pseudo-classi rilevati; la terza comprende gli pseudo-elementi e i selettori di elemento o di tipo riconosciuti; la quarta completa la rappresentazione numerica. Il selettore universale non viene aggiunto al conteggio.

4. Leggi il punteggio dopo aver verificato le componenti. Il calcolo assegna ai quattro valori, nello stesso ordine, i pesi 1000, 100, 10 e 1, quindi puoi usare il numero come sintesi della combinazione rilevata. Per una seconda verifica, sostituisci il contenuto del campo e avvia una nuova elaborazione, mantenendo separati i risultati dei diversi selettori.

5. Se vuoi osservare il comportamento dell'input assente, elimina il contenuto oppure inserisci soltanto spazi bianchi e avvia il calcolo. Questo caso ha un esito distinto da quello di un selettore che contiene elementi riconosciuti.

Leggere componenti e punteggio

Per interpretare il numero, considera prima la posizione della componente che lo determina. Un valore nella prima posizione ha un peso maggiore di uno nella seconda, mentre la terza e la quarta incidono con pesi progressivamente inferiori; il numero non è quindi una semplice somma dei quattro valori. Un token riconosciuto nella categoria degli identificatori può spostare il punteggio più di un token riconosciuto tra classi, attributi o pseudo-classi.

Le quattro componenti aiutano a capire da quali categorie deriva il risultato. Per esempio, un selettore composto può produrre un valore superiore a zero quando include elementi riconosciuti dal calcolo, mentre il selettore universale, da solo, non contribuisce. Gli attributi e le pseudo-classi vengono conteggiati nella seconda componente quando il rilevamento dello strumento li riconosce; pseudo-elementi ed elementi o tipi rilevati incidono invece sulla terza.

Quando il campo contiene soltanto spazi bianchi, il risultato presenta quattro componenti a zero, un punteggio pari a zero e una rappresentazione vuota del selettore. Un risultato riuscito non certifica che ogni costrutto della sintassi CSS sia stato interpretato: il conteggio dipende dalle regole di rilevamento adottate. Per questo, usa il testo conservato e le singole componenti per capire che cosa è stato analizzato, senza attribuire al numero informazioni che il calcolatore non restituisce.

Esempio pratico

Stai verificando la specificità di un selettore composto usato per individuare il titolo di una pagina.

Inserisci #intestazione .titolo nel campo del selettore e avvia il calcolo; controlla quindi il testo conservato, le quattro componenti e il punteggio mostrato.

Il risultato verificabile contiene la rappresentazione del selettore inviato, quattro componenti di specificità e un punteggio numerico superiore a zero.

Limiti

• Il conteggio dipende dal rilevamento verificato per identificatori, classi, attributi, pseudo-classi, pseudo-elementi ed elementi o tipi; non rappresenta un'analisi completa di ogni sintassi CSS.

Errori comuni

• Se compare un risultato composto da zeri, la causa può essere un campo vuoto o formato soltanto da spazi bianchi; inserisci un selettore non vuoto e verifica poi che la rappresentazione restituita corrisponda al testo che volevi analizzare.

Domande frequenti

Che cosa restituisce il calcolatore con il campo vuoto?

Quando il campo è vuoto oppure contiene soltanto spazi bianchi, il calcolatore restituisce quattro componenti con valore zero, un punteggio pari a zero e una rappresentazione vuota del selettore. Un testo non vuoto segue invece il normale percorso di calcolo previsto dallo strumento.

Da quali pesi dipende il punteggio della specificità?

Il numero deriva dai quattro valori moltiplicati rispettivamente per 1000, 100, 10 e 1. La prima componente, legata ai token simili agli identificatori rilevati, pesa quindi più della seconda, mentre la terza e la quarta hanno incidenza minore nel calcolo.

Come vengono trattati universale, attributi e pseudo-classi?

Il selettore universale non aumenta il conteggio. Attributi e pseudo-classi entrano nella seconda componente quando vengono rilevati dalle regole dello strumento, mentre pseudo-elementi e selettori di elemento o di tipo riconosciuti entrano nella terza.