Binatomy
CSS Specificity

CSS Specificity Calculator

Calcola e confronta la specificità di selettori CSS con spiegazione dettagliata

1

ID

2

Classes/Attr

1

Elements

121

Total

0

ID

2

Classes/Attr

1

Elements

21

Total

Vince il selettore

A

Specificità 1,2,1 vs 0,2,1

FAQ

Domande Frequenti

Tutto quello che devi sapere sulla specificità CSS

Come si calcola la specificità CSS?

La specificità è calcolata come una tripla (a,b,c): "a" conta gli ID (#id), "b" conta classi (.class), attributi ([attr]) e pseudo-classi (:hover), "c" conta gli elementi (div, p) e pseudo-elementi (::before). Per confrontare, si legge da sinistra: 1,0,0 batte sempre 0,10,0.

Cosa batte cosa nella specificità CSS?

Lo stile inline (style="") ha specificità 1,0,0,0 e batte tutto. Poi vengono gli ID (0,1,0,0), poi classi/attributi/pseudo-classi (0,0,1,0), poi elementi/pseudo-elementi (0,0,0,1). Il selettore universale (*) ha specificità 0. !important sovrascrive tutto.

Perché la specificità è importante?

Quando più regole CSS si applicano allo stesso elemento, quella con specificità più alta vince. Capire la specificità evita sorprese di stile e riduce l'abuso di !important. Una buona architettura CSS mantiene la specificità bassa e prevedibile.

Come si calcola la specificità di un selettore CSS?

La specificità di un selettore CSS si esprime come tripla: il primo numero conta gli ID, il secondo classi, attributi e pseudo-classi, il terzo elementi e pseudo-elementi. Il confronto si legge da sinistra, quindi 1,0,0 batte 0,10,0.

Quale regola vince quando due selettori colpiscono lo stesso elemento?

Vince la regola con la specificità più alta. L'ordine è: stile inline, poi ID, poi classi, attributi e pseudo-classi, infine elementi e pseudo-elementi. Il selettore universale ha specificità zero e !important sovrascrive tutto.

Perché conviene tenere bassa la specificità CSS?

Una specificità bassa e prevedibile rende chiaro quale regola verrà applicata e riduce il ricorso a !important per correggere gli stili. Confrontare due selettori prima di scriverli evita sorprese quando le regole si sovrappongono.

I miei dati restano privati?

Sì, e non perché ce lo siamo promessi: questo strumento gira per intero dentro il tuo browser. Quello che scrivi o che carichi non parte dal tuo dispositivo, quindi non arriva a nessun nostro server e non c'è niente che possiamo conservare, leggere o perdere. La prova la puoi fare da te: apri la pagina, stacca la connessione e lo strumento continua a funzionare.

Salvate quello che inserisco?

No. Dietro a questo strumento non c'è nessun database: non salviamo i file, non salviamo i testi e non salviamo i risultati. Quando chiudi la scheda non resta niente — né qui da noi, perché non è mai arrivato, né altrove.

Mi profilate? Siete in regola con il GDPR?

Noi non ti profiliamo: non c'è un account da fare, non ti chiediamo l'email per usare uno strumento e non teniamo un profilo di quello che fai. Siamo una società italiana e lavoriamo sotto il GDPR e le altre regole europee, con l'informativa e la richiesta di consenso in chiaro. Una cosa la diciamo per intero invece di nasconderla nello slogan: la pubblicità in pagina è di Google, e Google può usare i cookie per personalizzarla. Decidi tu dal banner dei consensi: se dici di no gli annunci restano, ma non personalizzati, e lo strumento funziona esattamente uguale.

Se è gratis, dove guadagnate?

Con la pubblicità in pagina, e basta. Non vendiamo i tuoi dati, non c'è un piano a pagamento nascosto, non c'è un limite che a un certo punto ti chiede la carta e non devi registrarti. Gli annunci pagano i server e il tempo che ci mettiamo a scrivere gli strumenti: è il motivo per cui possiamo tenerli aperti a tutti.

Strumenti simili