Calculadora de especificidad CSS (a,b,c) en línea
Calcula la especificidad (a,b,c) de un selector CSS para saber qué regla gana, en tu navegador.
Specificity: (1,2,3). The larger the tuple (compared left to right), the more the rule wins. Inline styles count as (1,0,0,0) and !important overrides all.
🔒 100 % en el cliente — no se envía ningún dato
Calcula la especificidad de cualquier selector CSS y obtén el triplete (a,b,c) al instante. Perfecto para entender por qué una regla anula a otra y depurar tus conflictos de estilo. 100% en tu navegador, sin enviar datos a ningún servidor.
What is it for?
- ▸ Entender por qué un estilo CSS no se aplica pese a tu regla
- ▸ Comparar dos selectores para saber cuál gana
- ▸ Evitar abusar de !important ajustando tus selectores
- ▸ Enseñar o repasar las reglas de especificidad CSS
FAQ
¿Cómo se calcula la especificidad de un selector CSS?
Se cuentan tres categorías: (a) selectores #id, (b) clases, atributos y pseudoclases, (c) elementos y pseudoelementos. Pega tu selector en la herramienta y el triplete (a,b,c) se muestra automáticamente.
¿Qué selector CSS tiene la mayor prioridad?
Un estilo inline vence a un ID, que vence a una clase, que vence a un elemento. Con igual especificidad, gana la última regla declarada, salvo cuando se usa !important.
¿Cuenta !important para la especificidad?
No, !important no forma parte del cálculo (a,b,c): anula la cascada normal a un nivel superior. Entre dos reglas con !important, decide su respectiva especificidad.