Calculadora de Especificidad CSS
Esta calculadora de especificidad CSS calcula al instante el peso de selectores para ayudar a depurar conflictos de cascada y entender por qué ciertas reglas prevalecen. Introduce selectores y recibe la tupla de especificidad (a, b, c). Ideal para evitar usar !important y solucionar reglas inesperadas.
Specificity Results
How to Read Specificity
(a, b, c)where:- a = ID selectors (#id)
- b = Class selectors (.class), attribute selectors ([type="text"]), pseudo-classes (:hover)
- c = Element selectors (div, p), pseudo-elements (::before)
- Higher numbers win. Compare left to right: (1,0,0) beats (0,99,99)
Por qué usar esta herramienta
La especificidad determina qué estilos se aplican cuando múltiples reglas afectan el mismo elemento. Esta herramienta cuenta IDs, clases, atributos y elementos para calcular la tupla de especificidad.
Evita añadir !important innecesario; en su lugar identifica la regla con mayor especificidad y refactoriza tu CSS.
Soporta selectores complejos con combinadores y pseudo-clases, ayudándote a dominar la cascada en proyectos grandes.