Calculador de especificidad CSS

Calcula puntuaciones de especificidad de selectores CSS con desglose a-b-c

¿Qué es y cómo funciona?

La especificidad CSS es el algoritmo que usan los navegadores para decidir qué regla CSS gana cuando múltiples reglas apuntan al mismo elemento. Se calcula como una puntuación de tres partes (A, B, C): A = estilos en línea, B = IDs, C = clases, atributos, pseudo-clases y elementos.

Esta calculadora toma cualquier selector CSS y calcula su puntuación de especificidad, mostrando el desglose (A, B, C) y ayudándote a entender por qué una regla anula a otra.

Casos de uso

Preguntas frecuentes

¿Cómo se calcula la especificidad exactamente?

Cuenta: (estilos en línea = A), (IDs = B), (clases, atributos, pseudo-clases = C), (elementos, pseudo-elementos = C peso menor). Un solo ID siempre supera cualquier número de clases.

¿Qué hace !important a la especificidad?

!important anula todas las reglas de especificidad y orden de fuente. Crea una capa de cascada "importante" separada. Usarlo en exceso rompe la cascada y hace las hojas de estilo difíciles de mantener.

¿La especificidad se aplica a las propiedades heredadas?

No. Los valores heredados no tienen especificidad — cualquier valor establecido explícitamente en el elemento gana sobre uno heredado.

¿Cuál es la especificidad de :where() vs :is()?

:where() tiene especificidad cero — útil para selectores de utilidad fáciles de anular. :is() toma la especificidad de su argumento más específico.

Desarrollador

Generador de UUID · Conversor de timestamps · Codificador Base64 · Decodificador Base64 · Generador de hash · Conversor de colores