Calculadora de especificidad de selectores CSS
Calcula al instante la especificidad (A-B-C) de un selector CSS
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Introduce un selector CSS y la herramienta lo desglosa automáticamente en número de IDs (A), clases/atributos/pseudoclases (B) y etiquetas/pseudoelementos (C) para mostrar su puntuación de especificidad. Es útil para desarrolladores front-end que quieren entender por qué un estilo no se aplica o qué regla prevalece, y todo se procesa localmente en el navegador sin enviar datos a ningún servidor.
Cómo usar
- Escribe el selector CSS que quieres analizar en el campo de entrada (p. ej. div.content > p::first-line)
- Revisa los valores calculados automáticamente A (IDs), B (clases/atributos/pseudoclases) y C (etiquetas/pseudoelementos)
- Consulta la puntuación final de especificidad en formato A-B-C
- Recorre la lista de componentes extraídos para ver cómo se contó cada parte del selector
Preguntas frecuentes
- ¿Cómo se compara la especificidad entre selectores?
- Se compara columna por columna: primero A, luego B, luego C. Un A más alto siempre gana, sin importar B o C, y así sucesivamente.
- ¿Se calculan :not(), :is() y :has()?
- Sí, estas pseudoclases funcionales se calculan usando el selector de mayor especificidad dentro de los paréntesis. :where() es una excepción y no aporta especificidad.
- ¿Se envía mi selector a un servidor?
- No, todo el análisis y cálculo se realiza localmente con JavaScript en el navegador; no se transmite nada.