Calculadora de especificidad CSS: qué selector gana

Cómo se usa

Escriba un selector en Selector, tal como aparece en su hoja de estilos.
Escriba un segundo selector en Segundo selector (opcional) para compararlos, o déjelo vacío.
Lea Especificidad (a, b, c) del primer selector, y Qué regla gana si dio dos.
Use la tabla Partes contadas para ver qué parte de cada selector dio cada número.

Cómo se cuentan los tres números

La Recomendación Selectors Level 3 (en inglés) cuenta un selector en tres columnas. La herramienta compara los números de izquierda a derecha: primero a, luego b y después c. El selector universal * y los combinadores como > y + no se cuentan.

a es el número de selectores de ID, como #nav.
b es el número de selectores de clase, como .active; de selectores de atributo, como [href]; y de pseudoclases, como :hover.
c es el número de selectores de tipo, como li o a, y de pseudoelementos, como ::before.

Pseudoclases con argumentos

:is(), :not() y :has() cuentan como su argumento más específico, así que :is(#a, .b) es (1, 0, 0). :where() no cuenta nada. :nth-child() cuenta como una pseudoclase más el selector más específico de su lista «of S», así que :nth-child(even of li, .item) es (0, 2, 0). Estas reglas vienen del borrador Selectors Level 4 (en inglés), que es un Editor's Draft y puede cambiar.

Lo que la herramienta no hace

Cuenta un pseudoelemento con argumentos, como ::part(x), como un solo pseudoelemento, y no lee su argumento.
No lee el anidamiento con &, y acepta un selector por campo, no una lista con comas.
No puede ver su hoja de estilos; por eso, cuando dos selectores empatan, indica que gana la regla posterior y deja el orden en sus manos.

Ejemplo resuelto: un enlace en una barra de navegación

El primer selector, #nav li.active > a:hover, tiene un ID, #nav. Tiene dos clases y pseudoclases, .active y :hover, y dos tipos, li y a. Su especificidad es (1, 2, 2). El segundo selector, #nav a, tiene un ID y un tipo, así que su especificidad es (1, 0, 1). Gana el primero, porque a es igual y b y c son mayores.

Selector	a	b	c
#nav li.active > a:hover	1	2	2
#nav a	1	0	1

Preguntas frecuentes

¿Por qué un ID cuenta en la primera columna?

La herramienta compara las columnas de izquierda a derecha, así que se decide antes la columna de IDs, a. Un selector con un ID más tiene una a mayor, y en ese caso no se miran las clases ni los tipos de b y c.

¿Importa el orden de las reglas?

Solo cuando dos selectores tienen la misma especificidad. La especificación CSS Cascade Level 4 (en inglés) dice que, en ese caso, gana la última declaración en el orden del documento, así que se aplica la regla posterior.

¿Por qué :not(#a) suma a la especificidad?

La pseudoclase :not() en sí no se cuenta, pero sí su argumento. El ejemplo #s12:not(FOO) de Selectors Level 3 es (1, 0, 1): un ID, de #s12, y un tipo, de su argumento FOO.

¿El selector universal y los combinadores suman algo?

No. El selector universal se ignora, y también los combinadores como >, + y ~. El ejemplo * de la sección de Level 3 tiene la especificidad (0, 0, 0).

¿Incluye esta herramienta los estilos en línea y !important?

No. Cuenta un solo selector. La cascada compara primero el origen y la importancia, antes que la especificidad, así que una regla marcada con !important o un estilo en línea puede ganar sea cual sea la puntuación de los selectores. Compare solo dos selectores que fijen la misma propiedad con la misma importancia.

¿Se envía a alguna parte el selector que escribo?

No. El análisis se hace en su navegador, y nada de lo que escribe se guarda ni se envía a nuestro servidor. Compruebe el resultado antes de cambiar una hoja de estilos.

Fuentes

Cifras y texto revisados por última vez el jueves, 12 de noviembre de 2026.

Resultado