Especificidad CSS

La especificidad CSS determina qué regla prevalece cuando varias reglas apuntan al mismo elemento. Se expresa como (a, b, c) y se compara componente a componente, de izquierda a derecha.

Componentes de la especificidad

Componente	Valor	Ejemplos
a, ID	0-1-0-0	`#header`, `#nav`
b, Clase/atributo/pseudo-clase	0-0-1-0	`.btn`, `[type="text"]`, `:hover`
c, Tipo/pseudo-elemento	0-0-0-1	`div`, `p`, `::before`
Universal / combinadores	0-0-0-0	`*`, `>`, `+`, `~`

Reglas de comparación

Se compara de izquierda a derecha. Un solo ID (0,1,0,0) supera cualquier número de clases. Ejemplo: #nav .link = (0,1,1,0) supera a .menu .item a = (0,0,2,1).

Casos especiales

!important supera toda especificidad (usar solo como último recurso)
:is() y :has() heredan la especificidad de su argumento más específico
:where() siempre tiene especificidad cero, útil para resets
Los estilos en línea tienen especificidad (1,0,0,0)