Calculadora de especificidad CSS
Selectores CSS
Resumen
Resultados de especificidad
Acerca de la calculadora de especificidad CSS
La especificidad CSS decide qué selector gana cuando varias reglas apuntan al mismo elemento. Esta calculadora muestra la puntuación A-B-C de cada selector.
Cuenta IDs, clases, atributos, pseudo-clases, elementos y pseudo-elementos, incluyendo funciones comunes como :is(), :not(), :has() y :where().
Cómo usar esta herramienta
- Pegue un selector por línea, una lista separada por comas o reglas CSS completas.
- Haga clic en Analizar para calcular la especificidad de cada selector.
- Compare las puntuaciones A-B-C y revise qué selector es más fuerte.
Consejos
- Evite IDs innecesarios si quiere CSS fácil de sobrescribir.
- :where() siempre tiene especificidad cero, útil para estilos predeterminados de baja prioridad.
- Cuando dos selectores tienen la misma especificidad, normalmente gana la regla que aparece después.
Comprobaciones de especificidad CSS antes de cambiar un override
La puntuación del selector explica solo una parte de la cascada. Capas, origen, importancia, alcance y orden también pueden decidir la regla ganadora.
Compara toda la cascada
Revisa origen, cascade layers, !important, especificidad, proximidad de alcance y orden antes de aumentar el peso.
Mantén selectores sostenibles
Prefiere clases y límites claros de componentes frente a IDs, anidación profunda o una escalada de !important.
Revisa selectores funcionales
Recuerda que :is(), :not() y :has() usan la especificidad de sus argumentos, mientras :where() siempre aporta cero.
Prueba el estado renderizado
Verifica estados hover, focus, disabled, responsive, temas y contenido dinámico en las herramientas del navegador.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.