CSS Specificity Calculator
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
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.
¿Cómo se calcula la especificidad CSS?
La especificidad se calcula como una tripleta (a,b,c): "a" cuenta los ID (#id), "b" cuenta clases (.class), atributos ([attr]) y pseudo-clases (:hover), "c" cuenta elementos (div, p) y pseudo-elementos (::before). Para comparar, se lee de izquierda: 1,0,0 siempre gana a 0,10,0.
¿Qué vence a qué en la especificidad CSS?
Los estilos inline (style="") tienen especificidad 1,0,0,0 y superan todo. Luego vienen los ID (0,1,0,0), luego clases/atributos/pseudo-clases (0,0,1,0), luego elementos/pseudo-elementos (0,0,0,1). El selector universal (*) tiene especificidad 0. !important lo sobreescribe todo.
¿Por qué es importante la especificidad?
Cuando múltiples reglas CSS se aplican al mismo elemento, gana la de mayor especificidad. Entender la especificidad evita sorpresas de estilo y reduce el abuso de !important. Una buena arquitectura CSS mantiene la especificidad baja y predecible.
¿Mis datos siguen siendo privados?
Sí, y no porque lo prometamos: esta herramienta funciona entera dentro de tu navegador. Lo que escribes o subes no sale de tu dispositivo, así que no llega a ningún servidor nuestro y no hay nada que podamos guardar, leer o perder. Puedes comprobarlo tú mismo: abre la página, desconecta internet y la herramienta sigue funcionando.
¿Guardáis lo que introduzco?
No. Detrás de esta herramienta no hay ninguna base de datos: no guardamos los archivos, ni los textos, ni los resultados. Cuando cierras la pestaña no queda nada: ni aquí con nosotros, porque nunca llegó, ni en ningún otro sitio.
¿Me perfiláis? ¿Cumplís el RGPD?
Nosotros no te perfilamos: no hay cuenta que crear, no te pedimos el correo para usar una herramienta y no guardamos ningún perfil de lo que haces. Somos una empresa italiana y trabajamos bajo el RGPD y el resto de normas europeas, con la política de privacidad y la petición de consentimiento a la vista. Una cosa la decimos entera en vez de esconderla en un eslogan: la publicidad de la página es de Google, y Google puede usar cookies para personalizarla. Lo decides tú desde el banner de consentimiento: si dices que no, los anuncios siguen pero sin personalizar, y la herramienta funciona exactamente igual.
Si es gratis, ¿de qué vivís?
De la publicidad de la página, y nada más. No vendemos tus datos, no hay un plan de pago escondido, no hay un límite que acabe pidiéndote la tarjeta y no tienes que registrarte. Los anuncios pagan los servidores y el tiempo que dedicamos a escribir las herramientas: por eso podemos tenerlas abiertas para todos.