Calculadora de especificidad CSS

Acerca de esta herramienta

La Calculadora de especificidad CSS le permite ingresar cualquier selector CSS y ver al instante su puntuación de especificidad, desglosada en tres dimensiones: ID, clase y elemento. Ofrece comparación lado a lado de dos selectores con detección automática del ganador de especificidad, además de ejemplos de selectores comunes y una referencia de reglas de especificidad.

Características principales

• Cálculo de especificidad en tiempo real mientras escribe
• Desglose visual de los pesos de ID, clase y elemento
• Comparación lado a lado de selectores con indicador automático del ganador
• Ejemplos de selectores comunes que se pueden rellenar con un solo clic
• Referencia de reglas de especificidad con categorías codificadas por colores
• Soporte para selectores de ID, clase, atributo, pseudoclase y pseudoelemento

Vista rápida

Casos de uso

• Depurar conflictos CSS y problemas de anulación de estilos
• Comparar la especificidad de selectores antes de escribir reglas
• Aprender y enseñar reglas de especificidad CSS con ayudas visuales
• Optimizar la estructura y mantenibilidad de las hojas de estilo
• Verificar que los selectores sigan las mejores prácticas de especificidad