Calculadora de especificidad CSS
Selectores CSS
Resumen
Selectores
0
Más fuerte
0-0-0
Estado
Inactivo
La especificidad se muestra como A-B-C: IDs, clases/atributos/pseudo-clases y elementos/pseudo-elementos.
Resultados de especificidad
Analice selectores para ver las puntuaciones de especificidad.
Acerca de la calculadora de especificidad CSS
La especificidad CSS decide qué selector gana cuando varias reglas apuntan al mismo elemento. Esta calculadora muestra la puntuación A-B-C de cada selector.
Cuenta IDs, clases, atributos, pseudo-clases, elementos y pseudo-elementos, incluyendo funciones comunes como :is(), :not(), :has() y :where().
Cómo usar esta herramienta
- Pegue un selector por línea, una lista separada por comas o reglas CSS completas.
- Haga clic en Analizar para calcular la especificidad de cada selector.
- Compare las puntuaciones A-B-C y revise qué selector es más fuerte.
Consejos
- Evite IDs innecesarios si quiere CSS fácil de sobrescribir.
- :where() siempre tiene especificidad cero, útil para estilos predeterminados de baja prioridad.
- Cuando dos selectores tienen la misma especificidad, normalmente gana la regla que aparece después.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Minificador/embellecedor de CSS
Minimice CSS para reducir el tamaño del archivo o embellezca CSS comprimido para facilitar la lectura.
Utilidades varias
›
Generador de CSS Clamp
Genere valores responsivos de CSS `clamp()` para tipografía fluida, espaciado, gaps y tamaño de layout.
Utilidades varias
›
Generador de cuadrícula CSS
Cree diseños de cuadrícula CSS con columnas, filas, espacios, alineación, vista previa en vivo y CSS listo para copiar.
Utilidades varias
›
Generador CSS Flexbox
Cree diseños CSS flexbox con vista previa en vivo, controles de alineación, ajuste, dirección, espacio y CSS listo para copiar.
Utilidades varias
›
Convertidor de unidades CSS
Convierta unidades CSS como px, rem, em, %, vw y vh con el tamaño de fuente base, el tamaño principal y la configuración de ventana gráfica.
Utilidades varias
›
Preguntas frecuentes sobre especificidad CSS
¿Qué significa A-B-C?
A son selectores ID, B son clases, atributos y pseudo-clases, y C son elementos y pseudo-elementos.
¿Cuenta estilos inline?
Esta herramienta calcula especificidad de selectores. Los estilos inline están fuera de la especificidad de selectores y suelen ser más fuertes.
¿Cómo afecta :where()?
:where() aporta especificidad cero, incluso si sus argumentos contienen IDs o clases.
¿Puedo pegar reglas CSS completas?
Sí. La herramienta extrae los selectores antes de las llaves de apertura y los analiza.