Calculadora de especificidad CSS
Calcula la especificidad del selector.
Sobre esta herramienta
Calcula la especificidad clásica (a,b,c) de un selector para entender por qué una regla se impone a otra sin abrir DevTools cada vez. Analiza el selector escrito, sin considerar el orden del archivo ni @layer.
Cómo usar
Escribe o pega el selector, ejecuta el cálculo y lee el reparto entre IDs, clases y elementos. Cuanto más baja sea la cifra, más fácil será sobrescribir la regla luego.
Ejemplo
El selector de ejemplo mezcla elementos y clases, como el CSS heredado de una navegación.
Entrada
nav.site-header .menu a.activeSalida
Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2Consejo
Si necesitas !important a menudo, el verdadero problema es la deuda de especificidad acumulada.
Conviene saber
¿Cómo se calcula la especificidad?
Se cuentan tres grupos: IDs; luego clases, atributos y pseudoclases; y por último elementos y pseudoelementos. El resultado se muestra como (a,b,c) y se compara de izquierda a derecha.
¿Aparecen aquí !important o los estilos en línea?
No. Quedan fuera del selector, así que no forman parte de la puntuación (a,b,c). Un estilo en línea o !important gana a cualquier especificidad de selector.