Calculadora de Especificidad CSS
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
Probador de selectores CSS
Prueba un selector CSS contra tu HTML y ve exactamente qué elementos coinciden, en tu navegador.
Detector de Caracteres Invisibles / Zero-Width
Detecta NBSPs, caracteres zero-width, marcas bidi y tabs en texto pegado — y límpialos.
Playground de CSS Flexbox
Elige visualmente flex-direction, justify-content, align-items y gap — copia el CSS o la clase Tailwind.
Minificador HTML / CSS / JS
Quita espacios y comentarios de HTML, CSS o JavaScript — ve el tamaño ahorrado y copia el resultado.
Playground de CSS Grid
Elige visualmente grid-template-columns / rows, gap y alineación de ítems — copia el CSS a tu proyecto.
Conversor de CSS a objeto de estilo JS
Convierte un bloque de declaraciones CSS en un objeto de estilo en línea de React/JS, en tu navegador.