Calculadora de especificidad de selectores CSS

Esta calculadora acepta un selector, valida su estructura y devuelve el recuento habitual de cuatro partes: estilos en línea, ID, clases o atributos o pseudoclases, y tipos de elemento o pseudoelementos. También aplica las reglas especiales de selectores modernos como :is(), :not(), :has(), :where() y :nth-child(). Puede usarla para explicar una sobrescritura inesperada, comparar selectores durante una refactorización o incorporar una comprobación fiable a sus herramientas de desarrollo.

Cómo interpretar el resultado de cuatro partes

El resultado se expresa como (en línea, ID, clase, tipo). La primera posición representa declaraciones de estilo en línea; como esta herramienta recibe un selector y no un atributo style de HTML, su valor siempre es cero. La segunda cuenta selectores de ID como <code>#checkout</code>. La tercera agrupa selectores de clase, de atributo y pseudoclases; por tanto, <code>.button</code>, <code>[disabled]</code> y <code>:hover</code> suman una unidad cada uno. La cuarta cuenta selectores de tipo de elemento y pseudoelementos, de modo que <code>button</code> y <code>::before</code> añaden una unidad. Los selectores universales y combinadores no suman nada. Compare la tupla de izquierda a derecha, sin convertirla en una suma decimal: un ID supera cualquier cantidad de clases y una clase supera cualquier cantidad de tipos. Los campos con nombre facilitan el uso programático, mientras que el array de especificidad conserva la forma visual convencional. Recuerde que la especificidad es solo una parte de la cascada. El origen, la importancia, las capas, la proximidad de ámbito y el orden de aparición aún pueden decidir qué declaración vence en una página real.

Reglas de las pseudoclases funcionales

Las pseudoclases funcionales modernas exigen algo más que contar cada token. <code>:is()</code>, <code>:not()</code> y <code>:has()</code> aportan la especificidad del selector más específico de su lista de argumentos; la envoltura no añade una clase. En cambio, <code>:where()</code> siempre aporta cero, aunque su argumento contenga un ID. Por eso resulta útil para valores predeterminados de bibliotecas que deben ser fáciles de sobrescribir. Las pseudoclases estructurales <code>:nth-child()</code> y <code>:nth-last-child()</code> añaden una pseudoclase y, si incluyen una lista opcional tras <code>of</code>, también aportan el miembro más específico. Las demás pseudoclases funcionales suman en el nivel de clase, mientras que los pseudoelementos suman en el nivel de tipo. El analizador reconoce además selectores relativos dentro de <code>:has()</code>, caracteres escapados en identificadores, valores de atributo con puntuación, espacios de nombres y las formas heredadas con un solo signo de dos puntos: <code>:before</code>, <code>:after</code>, <code>:first-line</code> y <code>:first-letter</code>. Estas diferencias reflejan el razonamiento real sobre CSS actual, en lugar de tratar los paréntesis como texto opaco.

Validación para detectar errores de selector

Un número de especificidad solo sirve si la entrada es un selector plausible. Por ello, la calculadora rechaza campos ausentes, texto vacío, cadenas sin terminar, corchetes o paréntesis sin cerrar, combinadores mal formados, identificadores ausentes tras un punto o una almohadilla y otros errores estructurales. Acepta un selector cada vez. Una coma en el nivel superior crea una lista cuyos miembros pueden tener especificidades distintas, así que esa entrada se rechaza y se solicita un único selector; calcule cada miembro por separado al comparar una lista de reglas. La longitud está limitada para que la ejecución sea predecible, y el algoritmo no utiliza una sesión de navegador, conexión de red, valores aleatorios ni reloj. Así, una misma entrada genera el mismo JSON en el widget local, una llamada API, una prueba o una comprobación de compilación. Use el resultado como diagnóstico concreto: compare los selectores y, si la especificidad no basta para explicar el estilo, revise las capas de cascada, <code>!important</code>, la herencia y el orden de aparición.