Categoría: Desarrollo
Calculadora de Especificidad CSS
Compara la especificidad de selectores como una puntuación A-B-C
Introduce uno o más selectores CSS para calcular su especificidad como una puntuación ID-clase-elemento (A-B-C), ordenada para que veas qué regla ganaría. Funciona por completo en tu navegador.
| Selector | Especificidad (A-B-C) | IDs | Clases, atributos, pseudoclases | Elementos, pseudoelementos |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
Cuando dos reglas CSS apuntan al mismo elemento, gana la de mayor especificidad, no la que se escribió al final. La especificidad se cuenta como tres números: A para selectores de ID, B para clases, selectores de atributo y pseudoclases, y C para selectores de elemento y pseudoelementos. Esta herramienta analiza cada selector que introduces, incluyendo :not(), :is(), :has() y el :where() de especificidad cero, y muestra su puntuación A-B-C para que puedas comparar selectores directamente en vez de adivinar.
Cómo se usa
- Introduce un selector por línea, como #nav .item > a:hover.
- Lee la puntuación de especificidad A-B-C de cada selector.
- Ordena por especificidad para ver qué selector ganaría un conflicto.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Se sube mi CSS a algún sitio?
- No. El análisis ocurre en JavaScript ejecutado en la página, así que los selectores de una hoja de estilos privada nunca salen de tu dispositivo.
- ¿Cómo se puntúan :not(), :is() o :has()?
- Estos aportan la especificidad de su argumento más específico, según la especificación CSS, mientras que :where() siempre aporta cero, sin importar lo que contenga.
- ¿El estilo en línea o !important afectan esta puntuación?
- No. Esta herramienta solo puntúa selectores. Un atributo de estilo en línea e !important anulan por completo la especificidad normal en lugar de sumarse a la puntuación A-B-C.