Ordenar selectores CSS por especificidad

Esta herramienta recibe selectores CSS individuales, valida su sintaxis, calcula el valor de especificidad de tres partes y devuelve la lista completa ordenada de menor a mayor. Reconoce pseudoclases funcionales modernas como :is(), :not(), :has(), :where() y :nth-child(), y conserva el orden original cuando dos selectores tienen el mismo peso.

Cómo leer la puntuación de especificidad de tres partes

Cada resultado utiliza la estructura habitual de ID, clases y tipos. El primer número cuenta selectores de ID como <code>#checkout</code>. El segundo cuenta clases, selectores de atributo y pseudoclases como <code>.active</code>, <code>[disabled]</code> y <code>:hover</code>. El tercero cuenta selectores de tipo y pseudoelementos como <code>button</code> y <code>::before</code>. Los selectores universales y los combinadores no suman puntos. La comparación es lexicográfica: un ID supera cualquier cantidad de entradas en las otras columnas, y una clase supera cualquier cantidad de selectores de tipo cuando coinciden los ID. El arreglo <code>specificity</code> resulta práctico para programas, mientras que <code>specificity_text</code> presenta el mismo valor en un formato compacto y legible. Los resultados se ordenan de forma ascendente, por lo que las reglas reutilizables aparecen primero y los selectores más difíciles de sobrescribir quedan al final. Si dos puntuaciones coinciden, la herramienta conserva su orden de entrada en vez de imponer un criterio alfabético secundario. Así, las ejecuciones repetidas son predecibles y mantienen el contexto del archivo CSS o de la lista de revisión.

Tratamiento correcto de las pseudoclases modernas

Las pseudoclases funcionales son la causa más frecuente de errores en cálculos manuales. <code>:where()</code> siempre aporta especificidad cero, incluidos los selectores de su interior, de modo que permite precisar una estructura sin dificultar la sobrescritura de una regla. En cambio, <code>:is()</code>, <code>:not()</code> y <code>:has()</code> aportan la especificidad del argumento más específico, sin añadir un punto propio de pseudoclase. Las formas <code>:nth-child()</code> y <code>:nth-last-child()</code> aportan un punto de pseudoclase más la mayor especificidad de una lista opcional introducida por <code>of</code>. También se contemplan formas del árbol de sombra como <code>:host()</code> y <code>::slotted()</code>. El analizador recorre paréntesis anidados, corchetes, cadenas entre comillas y escapes, por lo que no confunde las comas internas de una función con separadores de nivel superior. Envíe cada elemento como un solo selector. Una coma de nivel superior representaría varios selectores con puntuaciones potencialmente distintas; por eso se rechaza en lugar de reducirla a un único valor engañoso. Esta regla mantiene una correspondencia exacta entre cada entrada y una puntuación de salida.

Simplifique la cascada con la lista ordenada

Un informe de especificidad es más útil como ayuda para refactorizar que como invitación a crear selectores cada vez más fuertes. Pegue selectores representativos de un componente, sistema de diseño o archivo heredado y examine el extremo superior del resultado. Los saltos grandes suelen revelar ID, estados con demasiados calificadores o argumentos potentes ocultos dentro de <code>:is()</code> o <code>:not()</code>. Esas reglas pueden obligar al código posterior a repetir detalles estructurales solo para sobrescribir una declaración. Considere sustituirlas por una clase con una finalidad concreta, rebajar el contexto opcional mediante <code>:where()</code> u organizar capas para que la precedencia no dependa de una escalada de puntuaciones. El extremo inferior también aporta información: las reglas de elementos y utilidades ligeras se reutilizan mejor cuando su función está clara. Los procesos automatizados pueden llamar a la API por $0.002 para detectar selectores nuevos que superen el límite definido por su equipo, registrar la especificidad junto al CSS generado o mostrar diagnósticos ordenados durante una revisión. Una entrada no válida hace fallar toda la solicitud, por lo que un informe parcial nunca oculta un selector mal formado. El cálculo es determinista y no usa la red: la misma entrada siempre produce los mismos valores y el mismo orden.