Cómo usar esta herramienta para desarrolladores
- Escribe un selector CSS por línea.
- Ejecuta el cálculo.
- Compara las tuplas A-B-C; A (ID) domina sobre B y C.
- Usa el resultado para entender por qué una regla gana cuando origen y orden son comparables.
CSS Selector Specificity Calculator
Calcula la especificidad de selectores CSS y muestra la tupla (ID, clases/atributos/pseudoclases, tipos/pseudoelementos) junto con un valor comparable. Procesa una lista de selectores, uno por línea, y contempla :is(), :not(), :has() y :where() con reglas prácticas de Selectors Level 4.
Datos de entrada
Selectores CSS, uno por líneaEspacio publicitario
Qué hace esta herramienta para desarrolladores
Estima la especificidad de cada selector con reglas de CSS Selectors: IDs cuentan en A; clases, atributos y pseudoclases en B; elementos y pseudoelementos en C.
:where() aporta cero especificidad. :is(), :not() y :has() adoptan la mayor especificidad de sus argumentos. La herramienta analiza tokens sin necesitar una hoja de estilos completa.
La especificidad no es el único factor de la cascada: también importan origen, capas, !important, ámbito y orden de aparición.
Ejemplo
#app .card a → (1,1,1)
:where(#app) .card a → (0,1,1)
Casos de uso
- Depurar conflictos de cascada.
- Comparar selectores antes de refactorizar CSS.
- Detectar uso excesivo de IDs.
- Enseñar cómo afectan :where() e :is().
Consejos para obtener resultados fiables
- Prefiere selectores con la mínima especificidad necesaria.
- Recuerda que :where() siempre contribuye cero.
- No uses un número decimal como sustituto conceptual de la tupla A-B-C.
- Considera cascade layers antes de aumentar especificidad.
Detalles del procesamiento
El analizador elimina cadenas y comentarios, separa selectores externos a paréntesis y trata funciones de pseudoclase conocidas. El valor numérico mostrado sirve solo para ordenar dentro de esta herramienta.
Selectores extremadamente nuevos o sintaxis experimental pueden requerir revisión manual; la cascada completa no se simula.
Preguntas frecuentes
¿Qué tipo de entrada acepta CSS Selector Specificity Calculator?
Acepta selectores CSS, preferiblemente uno por línea.
¿Cómo trata CSS Selector Specificity Calculator el HTML o CSS no válido?
Los selectores que no pueden tokenizarse de forma razonable se calculan de forma conservadora y deben revisarse manualmente.
¿Los datos que pego en CSS Selector Specificity Calculator se envían a un servidor?
No. El procesamiento principal se ejecuta localmente en el navegador y no necesita una API externa.
¿Puedo usar el resultado de CSS Selector Specificity Calculator directamente en mi proyecto?
Sí, pero conviene revisarlo cuando la entrada contenga sintaxis ambigua, fragmentos incompletos o datos generados por terceros.
¿Funciona CSS Selector Specificity Calculator con texto Unicode y caracteres acentuados?
Sí. La herramienta trabaja con cadenas JavaScript y conserva Unicode; en descargas utiliza UTF-8.
Herramientas relacionadas para desarrolladores
Resumen técnico
| Módulo | Función |
|---|---|
| Entrada | Selectores CSS, uno por línea |
| Procesamiento | Local en el navegador |
| Salida | .json y exportaciones cuando corresponda |
Explora la categoría HTML, CSS y JavaScript
Consulta más utilidades para inspeccionar, transformar y validar código del navegador.