Calculadora de especificidad de selectores CSS
Calcula al instante la prioridad (A-B-C) de cualquier selector CSS
Escribe un selector CSS y la herramienta analiza automáticamente cuántos ID (A), clases, atributos y pseudoclases (B) y etiquetas o pseudoelementos (C) contiene, y te muestra su puntuación de especificidad. Es de gran ayuda para desarrolladores front-end y maquetadores cuando un estilo no se aplica y no queda claro qué regla gana. El selector que introduces se procesa solo en tu navegador y nunca se envía a un servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Escribe en el campo el selector CSS que quieras analizar (por ejemplo: div.content > p::first-line)
- Consulta los valores calculados automáticamente de A (ID), B (clases/atributos/pseudoclases) y C (etiquetas/pseudoelementos)
- Revisa la puntuación final de especificidad en formato A-B-C
- En la lista inferior verás uno a uno los componentes en los que se ha descompuesto el selector para el cálculo
Preguntas frecuentes
- ¿Cómo se comparan dos puntuaciones de especificidad?
- Se comparan las cifras en orden A, B y C. El selector con la A más alta siempre gana; si hay empate en A se compara B, y si también empata, C.
- ¿Se tienen en cuenta selectores como :not(), :is() o :has()?
- Sí. Estas pseudoclases funcionales aportan al cálculo la especificidad del selector más alto que haya entre sus paréntesis. La excepción es :where(), que no suma nada a la especificidad.
- ¿Se envía a algún servidor el selector que escribo?
- No, todo el cálculo se hace con JavaScript dentro del navegador y no se transmite a ninguna parte.