Calculadora de Especificidad CSS
Calcula la especificidad de cualquier selector CSS. Compara dos selectores, comprende qué regla gana y aprende el sistema de puntuación de especificidad.
Load a preset into Selector A
Specificity Scoring
ID selectors — (a)
#header, #nav
Class / attr / pseudo-class — (b)
.btn, [type=text], :hover
Type / pseudo-element — (c)
div, p, h1, ::before
Universal selector (*), combinators, and :where() contribute 0 specificity.
Cómo usar Calculadora de Especificidad CSS
- 1Ingresa un selector CSS en el campo de entrada.
- 2Consulta la puntuación de especificidad desglosada por ID, clase y elemento.
- 3Opcionalmente ingresa un segundo selector para comparar cuál gana.
- 4Comprende las reglas de cascada para tus selectores.
ZenovayAnalytics
Ve quién está en tu sitio ahora mismo.
- Seguimiento de visitantes en tiempo real
- Privacidad primero, sin aviso de cookies
- Configurado en dos minutos
Herramientas relacionadas
Formateador y Validador JSON
Formatea, valida y embellece datos JSON con resaltado de sintaxis y detección de errores.Decodificador JWT
Decodifica e inspecciona tokens JWT. Consulta el encabezado, la carga útil y verifica firmas.Base64 Codificar/Decodificar
Codifica texto a Base64 o decodifica Base64 a texto. Soporta UTF-8 y datos binarios.Codificador/Decodificador de URL
Codifica o decodifica componentes de URL. Maneja caracteres especiales, cadenas de consulta y URLs completas.Preguntas frecuentes
¿Cómo se calcula la especificidad CSS?▾
La especificidad CSS se calcula como una tripleta (a, b, c): a = número de selectores ID (#id), b = número de selectores de clase (.clase), selectores de atributo ([attr]) y pseudoclases (:hover), c = número de selectores de tipo (div, p) y pseudoelementos (::before). Los estilos en línea tienen especificidad (1,0,0,0) — por encima de todas las reglas de hojas de estilo. !important anula toda especificidad. El selector universal (*), los combinadores (+, >, ~, espacio) y :is()/:not() no añaden especificidad.
¿Qué selector gana cuando hay un conflicto?▾
El selector con mayor especificidad gana. Si las especificidades son iguales, gana la regla que aparece más tarde en la hoja de estilo (orden fuente). Para comparar: (1,0,0) supera a (0,9,9) porque los ID superan a cualquier cantidad de clases. La comparación no es aritmética — es lexicográfica: se compara primero (a), luego (b), luego (c). Un ID siempre supera a cualquier cantidad de clases.
¿Cuál es la especificidad de :is(), :not() y :where()?▾
:is() y :not() toman la especificidad de su argumento más específico: :is(#id, .clase) tiene especificidad (1,0,0) porque #id es el argumento más específico. :where() siempre tiene especificidad cero independientemente de sus argumentos — útil para clases de utilidad que desea anular fácilmente. :not() en sí contribuye con cero, pero el argumento dentro contribuye normalmente.
¿Cómo afecta !important a la especificidad?▾
!important anula toda especificidad para la propiedad a la que aplica. Sin embargo, no cambia la puntuación de especificidad. Dos declaraciones con !important se comparan normalmente por especificidad. Mejor práctica: evite !important. Si necesita anular una hoja de estilo de terceros, intente aumentar la especificidad en su lugar. Use !important solo para clases de utilidad que nunca deben anularse, como .visually-hidden o .sr-only.
¿Cuál es la especificidad de los estilos en línea?▾
Los estilos en línea (style="color: red") tienen la mayor especificidad de cualquier regla basada en selectores, escrita como (1,0,0,0) en la notación de 4 partes que incluye los estilos en línea. Ningún selector en una hoja de estilo puede anular un estilo en línea sin !important. Por eso los frameworks CSS suelen evitar los estilos en línea — son demasiado difíciles de anular. Use propiedades personalizadas CSS o clases en lugar de estilos en línea para un código mantenible.