Calculadora de especificidad CSS
Pega selectores, uno por línea, y mira la especificidad de cada uno desglosada y ordenada tal como la cascada realmente los aplicaría.
Los resultados aparecen aquí, ordenados de mayor a menor especificidad.
Cómo funciona
Cada selector se divide en combinadores y se tokeniza: los tokens #id cuentan
como IDs, los tokens .class, [attr] y :pseudo-class
cuentan como clases, y los nombres de elementos sin prefijo y los
::pseudo-elements cuentan como elementos. El selector universal *
y combinadores como >, +, ~ no suman nada. Cada
selector termina como una tripleta (IDs, clases, elementos), que es exactamente
cómo la propia especificación CSS define la especificidad, así que el orden aquí coincide
con lo que hará la cascada de tu propio navegador.
Todo se ejecuta con cada pulsación en el JavaScript de esta página. Pegar selectores de toda una hoja de estilos nunca sale de tu navegador.
Preguntas frecuentes
¿Cómo se calcula la especificidad?
Como cuatro niveles contados: estilos inline, luego selectores de ID, luego clases/selectores de atributo/pseudo-clases, y por último elementos y pseudo-elementos. Los niveles superiores siempre superan a los inferiores sin importar cuántos selectores de nivel inferior acumules, así que 1 ID (0,1,0,0) siempre le gana a 20 clases (0,0,20,0).
¿Por qué dos de mis selectores empatan?
Cuando la especificidad empata exactamente, CSS recurre al orden de aparición en el código: la regla que aparece más tarde en la hoja de estilos (o que se añadió después) gana. Esta herramienta ordena los empates según el orden en que los pegaste, respetando ese comportamiento.
¿Esto envía mi CSS a algún sitio?
No. Los selectores se analizan y puntúan por completo en tu navegador con un pequeño tokenizador en JavaScript. No se sube nada.