01
Empieza por la primera columna
Compara ID, después clases y atributos, y al final tipos. Muchas clases no superan un solo ID; los empates conservan el orden de entrada.
Herramientas de selectores CSS
Calculadora de especificidad CSS
Escribe un selector por línea. Las comas externas separan candidatos; la comprobación de HTML está desactivada al abrir.
Calculadora de especificidad CSS
Un selector por línea; las comas externas separan candidatos.
Escribe un selector.
Selectores y HTML opcional permanecen en el navegador; no se cargan recursos externos.
Opciones
La entrada cambió; el resultado anterior está desactualizado.
Si una regla no parece aplicarse, la Calculadora de especificidad CSS separa los ID, las clases y los tipos antes de tocar el archivo. La especificidad de selectores CSS no es una suma decimal: se compara de izquierda a derecha.
Puedes comparar selectores CSS y, si hace falta, comprobar un fragmento HTML. La prioridad de selectores CSS no equivale por sí sola a saber qué declaración gana en la cascada real.
Por qué usar la Calculadora de especificidad CSS
Entender funciones que cambian el peso
:is(#dialog, .panel) toma el argumento de mayor peso; :where(#dialog, .panel) aporta cero. La Calculadora de especificidad CSS enseña cada contribución para detectar un ID inesperado.
Separar coincidencia y puntuación
#missing puede tener un valor alto y no encontrar nodos en el fragmento, mientras .card sí encuentra uno con valor menor. La pantalla no llama ganadora a ninguna declaración CSS.
Cómo interpretar la comparación
02
Prueba funciones con los mismos argumentos
Alterna :is() y :where() para ver la diferencia. :nth-child(... of S) suma además el punto de su propia pseudoclase.
03
Activa HTML solo si necesitas contexto
El fragmento estático muestra cuántos nodos coinciden; no simula hover, focus, pseudoelementos representados ni la cascada completa.
Qué muestra el análisis
Desglose A-B-C
Cada selector indica ID, clases/atributos/pseudoclases y tipos/pseudoelementos, junto con las piezas que aportan peso.
Listas evaluadas por separado
Una coma externa crea candidatos independientes. Puedes ordenar de mayor a menor sin alterar el orden de los empates.
Coincidencia local opcional
El HTML se analiza como árbol inerte: no se ejecutan scripts ni se solicitan imágenes, hojas de estilo o URLs externas.
Límites de esta puntuación
- No determina el ganador real
- Origen, importancia, capa, propiedad, ámbito y orden del código pueden decidir una declaración. Aquí solo se compara el selector.
- Inline y !important no se suman
- Un atributo style y !important actúan en otras fases de la cascada; ninguno es una pieza A-B-C del selector.
- La lista separada por comas no tiene total
- Cada rama posee su propio valor y puede coincidir con un elemento distinto. Se muestran como resultados individuales.
- Cero coincidencias no es valor cero
- El valor de un selector no cambia aunque el fragmento no tenga nodos. Los estados hover y focus tampoco se recrean.
Preguntas sobre la Calculadora de especificidad CSS
¿Cómo afectan :is(), :not() y :has() a la especificidad?
:is(), :not() y :has() toman el argumento de mayor especificidad. La función en sí no añade otro punto.
¿Y :where(...)?
Aporta cero sin importar los selectores internos. Es útil para estilos base que deban ser fáciles de sobrescribir.
¿Cómo saber qué regla CSS gana?
Compara las columnas A-B-C; una diferencia más a la izquierda domina. Para saber qué declaración se aplica hace falta revisar también la cascada.
¿Qué pasa cuando dos selectores tienen la misma especificidad?
Hay empate de especificidad. En el mismo origen, capa e importancia pueden intervenir el ámbito y el orden de aparición.
¿Se suben mis datos, archivos o resultados?
No. Todo se procesa en el navegador y el fragmento HTML no carga recursos externos ni ejecuta scripts.
¿Hay una puntuación incorrecta?
Usa la Calculadora de especificidad CSS
Compara pesos y activa HTML solo para comprobar coincidencias. La Calculadora de especificidad CSS distingue ambas respuestas.