Calculadora de Especificidad CSS
Calculadora de especificidad CSS en línea y gratuita. Pega uno o dos selectores para ver su peso (a, b, c), cuál gana y por qué tu estilo no se aplica.
Calculadora de Especificidad CSS
Calculadora de especificidad CSS en línea y gratuita. Pega uno o dos selectores para ver su peso (a, b, c), cuál gana y por qué tu estilo no se aplica.
Acerca de la especificidad CSS
Qué decide la especificidad
Cuando dos reglas CSS apuntan al mismo elemento y definen la misma propiedad, el navegador necesita un desempate: la especificidad. Cada selector recibe un peso escrito como tres números, a, b, c. Se comparan de izquierda a derecha; gana el mayor. Solo cuando son exactamente iguales decide el orden de origen (o !important). Por eso una regla más específica puede anular sin ruido la que acabas de escribir.
Las tres columnas
La columna a cuenta selectores de ID, la columna b cuenta clases, atributos y pseudoclases, y la columna c cuenta tipos de elemento y pseudoelementos. El selector universal, los combinadores y :where() no suman. :is(), :not() y :has() aportan la especificidad de su argumento más específico. Esta herramienta colorea cada token para que veas a qué columna alimenta.
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿Por qué no se aplica mi CSS?
Normalmente otra regla que apunta al mismo elemento tiene mayor especificidad, así que gana aunque la tuya venga después. Pega aquí ambos selectores y compara los pesos (a, b, c) para ver qué columna lo decide.
¿Por qué :where() y * cuentan como cero?
:where() está diseñado para no añadir especificidad, así su contenido es fácil de anular. El selector universal * y los combinadores tampoco suman. En cambio :is() y :not() toman la especificidad de su argumento más específico.
¿Mis selectores se envían a algún servidor?
No. Todo el análisis y la comparación se ejecutan por completo en tu navegador y nada de lo que escribes sale de tu dispositivo.