Calculadora de Especificidad CSS
Desarrollo
Cuando dos reglas CSS apuntan al mismo elemento, la cascada elige la de mayor especificidad — contada como (ID, clase/atributo/pseudo-clase, tipo/pseudo-elemento). Esta herramienta parsea el selector, pondera cada parte (#id +1·0·0, .class +0·1·0, div +0·0·1), luego procesa pseudo-clases como :is(), :not(), :has() (gana el argumento de mayor peso) y :where() (siempre 0). Pega dos selectores para ver cuál gana la cascada y por cuánto.
IDs
1
Clases/attrs/pseudo
2
Tipos/pseudo-el
3
Desglose por token
#navID+(1, 0, 0)ulTipo+(0, 0, 1)liTipo+(0, 0, 1).activeClase+(0, 1, 0)aTipo+(0, 0, 1):hoverPseudo-clase+(0, 1, 0)
Comparar dos selectores
Pega un segundo selector para ver cuál gana la cascada.
Selector A
(1, 2, 3)
← A gana
Selector B
(0, 1, 3)
Ejemplos
Estilos inline, !important y orden de origen todos vencen la especificidad de selector. Esta herramienta solo computa la tupla (ID, clase, tipo) del selector mismo.
Cómo usar
- Escribe o pega cualquier selector CSS — el análisis se actualiza mientras escribes.
- Lee los números (ID, clase, tipo) — la tupla mayor gana la cascada.
- Pega un segundo selector en el cuadro de comparación para ver cuál gana.
Preguntas frecuentes
- ¿Por qué tres números en vez de uno?
- La especificidad se compara columna por columna desde la izquierda: un ID siempre vence a cualquier número de clases; una clase siempre vence a cualquier número de selectores de tipo. Sumarlos como (0,1,0) + (0,0,10) = 20 es el error clásico que el CSSWG advierte.
- ¿Cómo cuentan :is(), :not(), :has()?
- Toman la especificidad de su argumento de mayor peso. :is(#a, .b) = 1·0·0, :not(.a, .b) = 0·1·0. :where() siempre contribuye 0·0·0 — útil para overrides de especificidad cero.
- ¿Y pseudo-elementos como ::before?
- Los pseudo-elementos (::before, ::after, ::first-line) cuentan como selectores de tipo (0·0·1). Las formas legacy de un solo dos puntos (:before, :after) también se reconocen como pseudo-elementos.
- ¿Incluye estilos inline?
- No — el estilo inline es un bucket 'a' separado (1·0·0·0) que esta herramienta no modela porque no puedes escribir estilos inline en un selector. Usa !important cuando necesites sobrescribir estilos inline.
Herramientas relacionadas
Decodificador JWT
Decodifica un JSON Web Token para ver su cabecera, claims y expiración.
Generador de UUID
Genera UUID v4 aleatorios en lote, con copia.
Generador de Hash (SHA)
Genera hashes SHA-1, SHA-256, SHA-384 y SHA-512 a partir de texto.
Codificador / Decodificador de URL
Codifica texto para URLs en porcentaje, o decodifica URLs a texto.
Codificador / Decodificador Base64
Codifica texto a Base64 o decodifica Base64 a texto al instante.
Formateador y Validador de JSON
Formatea, embellece, minifica y valida JSON en tu navegador.