Cómo usar

Cuatro pasos: pega, ejecuta, revisa y copia. Todo ocurre en tu navegador.

Pega el contenido

Introduce CSS, HTML, JSON u otro texto. No se sube nada.

Ejecuta la herramienta

Pulsa Convertir o Ejecutar. El resultado aparece al instante.

Revisa la salida

Lee el código generado y las notas antes de usarlo.

Copia y usa

Copia el resultado y pégalo en tu proyecto.

Sobre esta herramienta

Calcula la especificidad clásica (a,b,c) de un selector para entender por qué una regla se impone a otra sin abrir DevTools cada vez. Analiza el selector escrito, sin considerar el orden del archivo ni @layer.

Ejemplo

El selector de ejemplo mezcla elementos y clases, como el CSS heredado de una navegación.

Entrada

nav.site-header .menu a.active

Salida

Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2

Consejo

Si necesitas !important a menudo, el verdadero problema es la deuda de especificidad acumulada.