Skip to main content

Calculadora de Especificidad CSS

Calcula y compara las puntuaciones de especificidad de selectores CSS. Comprende la prioridad de estilos para mejorar tu arquitectura CSS.

🎯

Añade selectores para comparar su especificidad

Cómo leer la especificidad

En línea
Estilo directo mediante el atributo style
IDs
Selección con #id
Clases / Atributos / Pseudoclases
Selección con .class, [attr], :hover, etc.
Elementos / Pseudoelementos
Selección con div, p, ::before, etc.
Compartir herramienta
📖

Cómo usar

Step 1

Introducir selectores

Introducir selectores

Introduce los selectores CSS

Step 2

Calcular

Calcular

La especificidad se calcula automáticamente

Step 3

Ver resultados

Ver resultados

Consulta los valores de especificidad y la comparación

Características

Cálculo instantáneo

Calcula la especificidad instantáneamente mientras escribes selectores

Comparación de selectores

Compara la especificidad de múltiples selectores lado a lado

Visualización

Muestra la especificidad como (a, b, c) y gráfico de barras

FAQ

Un sistema que determina la prioridad de selectores: ID > clase > selectores de elemento.