./prontouso.com

UTILIDADES DE DISEÑO

Calculadora de Especificidad CSS

Ingresa uno o dos selectores CSS para ver su especificidad, mostrada como ids-clases-tipos, y cuál ganaría en un conflicto.

Estado de la herramientaSe ejecuta en tu navegador
Vista previa

Entradas

Resultados

Selector A
1-1-1
Selector B (opcional, para comparar)
0-1-4

Gana A

Cómo funciona

  1. Ingresa tus datos

    Completa los valores, pega el texto o sube el archivo que necesita esta herramienta.

  2. Obtén el resultado al instante

    La mayoría de las herramientas se actualizan mientras escribes; algunas usan un solo botón. De cualquier forma, el resultado aparece aquí mismo.

  3. Usa tu resultado

    Copia, descarga o comparte lo que genere la herramienta — el control siempre es tuyo.

Privacidad y procesamiento — Se ejecuta localmente en tu navegador. Esta herramienta no sube tu entrada a ningún servidor.

¿Qué es Calculadora de Especificidad CSS?

Ingresa uno o dos selectores CSS para ver su especificidad, mostrada como ids-clases-tipos, y cuál ganaría en un conflicto.

ENTIENDE LA HERRAMIENTA

Cómo se calcula la especificidad CSS

Cómo se calcula

Los IDs cuentan más, luego las clases, selectores de atributo y pseudoclases, luego los selectores de tipo de elemento y pseudoelementos. Los combinadores como el espacio, > y ~ no afectan la especificidad.

Limitaciones

  • `:not()`, `:is()` y `:has()` se cuentan cada uno como una pseudoclase en lugar de mirar dentro de su argumento.
  • `:where()` siempre cuenta como cero, coincidiendo con la especificación CSS.

Ejemplo resuelto

`#main .container p` puntúa 1 id, 1 clase, 1 tipo (1-1-1), mientras que `nav ul li.active a` puntúa 0 ids, 1 clase, 4 tipos (0-1-4) — el primer selector gana a pesar de coincidir con menos elementos por nombre.

Ejemplo de especificidad

Peso
IDs - clases/atributos/pseudo-clases - tipos/pseudo-elementos

#app .card button:hover

Un ID, dos partes de nivel clase y un selector de tipo dan 1-2-1.

Notas sobre el cálculo

Todo el cálculo se ejecuta en tu navegador; los selectores que ingresas nunca se envían a ningún lado.

Preguntas frecuentes

¿Por qué a veces gana una regla posterior incluso con la misma especificidad?

Cuando la especificidad empata, gana la regla que aparece más tarde en la hoja de estilo (o que tiene mayor prioridad de capa CSS).

¿El estilo en línea aparece aquí?

No — los atributos `style` en línea siempre superan cualquier especificidad basada en selectores, sin importar lo que muestre esta calculadora.

¿La especificidad depende del orden de las partes en un selector?

No — solo qué tipos de selectores aparecen y cuántos de cada uno, no el orden en que están escritos.

¿Interpreta completamente :is(), :not() y :has()?

No. Esta implementación cuenta cada uno como una pseudo-clase, excepto :where(), que vale cero. La especificación completa mira los argumentos internos.

Herramientas relacionadas