Calculadora de Especificidad CSS

La especificidad CSS es un peso asignado a un selector CSS que determina qué regla de estilo se aplica cuando varias reglas coinciden con el mismo elemento. Se representa como un valor de tres partes (a, b, c) donde a cuenta los selectores de ID, b cuenta los selectores de clase/atributo/pseudo-clase y c cuenta los selectores de tipo de elemento y pseudo-elementos.

La especificidad se calcula contando tres categorías en un selector: (a) selectores de ID como #header, (b) selectores de clase (.card), selectores de atributo ([type="text"]) y pseudo-clases (:hover, :nth-child), y (c) selectores de tipo (div, p) y pseudo-elementos (::before). El selector universal (*) y los combinadores (+, ~, >) no tienen especificidad.

Gana el selector con mayor especificidad. Compara los valores (a, b, c) de izquierda a derecha: más IDs (a) siempre vence a más clases (b), y más clases siempre vencen a más elementos (c). Si la especificidad es igual, gana la regla que aparece después en la hoja de estilos.

La puntuación numérica es un valor comparable simplificado (a * 10000 + b * 100 + c) para clasificar selectores de mayor a menor. No debe interpretarse como un valor CSS literal — la especificidad CSS no es un número único sino una comparación de tres partes.

!important no forma parte de la especificidad en sí — anula todas las demás declaraciones independientemente de la especificidad. Esta herramienta calcula solo la especificidad del selector, no el efecto de !important. Evita usar !important en CSS de producción; prefiere selectores más específicos.

No. El selector universal (*) tiene especificidad cero (0, 0, 0). Los combinadores (+, >, ~, espacio) tampoco contribuyen a la especificidad. Solo los selectores de ID, clase, atributo, pseudo-clase, elemento y pseudo-elemento aumentan la especificidad.

La pseudo-clase :not() en sí no tiene especificidad, pero sí el selector que contiene. Por ejemplo, :not(#id) contribuye (1, 0, 0) a la especificidad (un ID). Esta herramienta tiene en cuenta :not() analizando el argumento dentro de los paréntesis.

:: es la sintaxis moderna de doble dos puntos para pseudo-elementos (::before, ::after, ::placeholder). La sintaxis heredada de un solo dos puntos (:before, :after) aún es compatible con los navegadores pero está obsoleta. Ambas suman 1 al conteo c (elemento/pseudo-elemento).

Los estilos en línea (p.ej., style="color: red") tienen una especificidad de (1, 0, 0, 0) — mayor que cualquier selector — representada como una cuarta categoría no contemplada en esta herramienta. En la práctica, los estilos en línea siempre anulan las reglas de la hoja de estilos (a menos que se use !important).

Sí. Cuando dos selectores tienen los mismos valores (a, b, c), gana el que aparece después en el orden fuente. Esta herramienta los muestra con el mismo rango cuando tienen puntuaciones idénticas, y puedes consultar el desglose (a, b, c) para confirmar que son equivalentes en peso.

Una alta especificidad hace que los estilos sean más difíciles de anular y mantener. Para anular un estilo, debes escribir un selector aún más específico o usar !important. Mantener baja la especificidad hace tu CSS más modular y predecible, especialmente en proyectos grandes.

Esta herramienta admite los selectores CSS3 más comunes, incluidos IDs, clases, atributos, pseudo-clases (incluyendo :not()), pseudo-elementos y selectores de tipo. Los selectores modernos complejos como :is(), :where(), :has() pueden no analizarse completamente.