¿Odias los anuncios? Ir Sin publicidad Hoy 

Calculadora de Especificidad de CSS

ColorDesarrollador

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Calculadora de Especificidad de CSS

El Calculador de Especificidad CSS te ayuda a determinar la puntuación exacta de especificidad de cualquier selector CSS. Comprender la especificidad es esencial para depurar conflictos en CSS y escribir hojas de estilo mantenibles. Ingresa uno o más selectores y ve inmediatamente sus puntuaciones (a,b,c) comparadas lado a lado.

Cómo Usar

Ingresa un selector CSS por línea en el campo de entrada. La herramienta calculará automáticamente y mostrará la puntuación de especificidad para cada selector. Cuando se ingresan múltiples selectores, el de mayor especificidad se resalta en verde para que puedas ver rápidamente cuál regla gana.

Características

Escala conforme a W3C – Calcula la especificidad utilizando el algoritmo oficial (a,b,c): IDs, clases/atributos/pseudo-clases, y elementos/pseudo-elementos.
Comparación de múltiples selectores – Ingresa múltiples selectores para comparar sus puntuaciones de especificidad y ver cuál gana.
Nivel 4 de Seleccionadores CSS – Soporta pseudo-clases modernas como :is(), :not(), :has() y :where() con manejo correcto de especificidad.
Visualización de puntuación – Badges con color y barras proporcionales hacen fácil entender la especificidad de forma inmediata.
Procesamiento del lado del cliente – Todas las calculaciones ocurren en tu navegador. No se envía ningún dato a un servidor.

ANUNCIO · ¿ELIMINAR?

 Preguntas frecuentes

¿Qué es la especificidad en CSS y cómo se calcula?

La especificidad es un sistema de peso que determina cuál regla de CSS se aplica cuando múltiples reglas dirigen al mismo elemento. Se calcula como una puntuación de tres partes (a,b,c): a cuenta los selectores de ID, b cuenta los selectores de clase, los selectores de atributo y los pseudo-clases, y c cuenta los selectores de tipo y pseudo-elementos. Una puntuación más alta en una posición anterior siempre gana, independientemente de las posiciones siguientes.
¿Cómo afectan :is(), :not() y :has() la especificidad?

Según el Nivel 4 de Seleccionadores CSS, la especificidad de los pseudo-clases :is(), :not() y :has() es igual a la especificidad del selector más específico en su lista de argumentos. Por ejemplo, :is(.foo, #bar) tiene la especificidad de #bar (1,0,0) porque es el argumento más específico. El pseudo-clase :where() es la excepción: siempre contribuye cero especificidad.
¿El orden de las reglas de CSS importa cuando la especificidad es igual?

Sí. Cuando dos selectores tienen exactamente la misma puntuación de especificidad, se aplica la regla de cascada de CSS: la regla que aparece más tarde en el código fuente gana. Es por eso que entender la especificidad es importante — depender únicamente del orden del código puede generar hojas de estilo frágiles que se rompen cuando se reordenan las reglas.
¿Por qué un selector de ID supera a múltiples selectores de clase?

El algoritmo de especificidad compara las puntuaciones posición por posición de izquierda a derecha. Un selector de ID tiene una puntuación (1,0,0), mientras que cualquier número de selectores de clase solo aumenta la segunda posición. Como la posición a se compara antes que la posición b, incluso un solo selector de ID siempre superará cualquier combinación de selectores de clase, atributo o pseudo-clase, independientemente de cuántos existan.