Especificidad en CSS

Cómo se calcula la puntuación de los selectores, cuándo gana una regla sobre otra y por qué conviene evitar !important.

📘 Teoría

Cálculo de la especificidad

Selector más específico, más prioridad.

Cada tipo de selector aporta un peso. Se suele representar como (a, b, c): a = estilos inline e !important, b = id, c = clases, atributos y pseudoclases, d = etiquetas y pseudoelementos. En la práctica, piensa en: etiqueta = 1 punto, clase o atributo = 10 puntos, id = 100 puntos. Un selector #header .nav a tiene más especificidad que solo a.

Puedes consultar la guía de especificidad en web.dev y la referencia en MDN para tablas detalladas.

Etiqueta (p, div): 1 punto.
Clase (.clase), atributo [href], pseudoclase (:hover): 10 puntos.
ID (#id): 100 puntos.
Estilo inline (style="..."): 1000 puntos.

Ejemplo

p { color: gray; }           /* 1 punto */
.destacado { color: blue; }   /* 10 puntos */
#titulo { color: black; }     /* 100 puntos */

!important

Gana sobre casi todo, pero complica el código.

Añadir !important a una declaración hace que esa regla tenga prioridad sobre otras del mismo origen, incluso con menor especificidad. El problema es que luego es muy difícil sobrescribir ese estilo sin usar otro !important, y el código se vuelve frágil. Úsalo solo en casos concretos (por ejemplo, utilidades de accesibilidad que deben ganar siempre).

Buenas prácticas

Selectores simples y predecibles.

Prefiere clases (.card, .btn) para aplicar estilos: son fáciles de entender y de sobrescribir. Evita depender de IDs para estilos (además el ID debe ser único en la página). No encadenes muchos selectores (.header .nav .list .item) si no es necesario; un solo nombre de clase suele ser suficiente.

1 Cálculo de la especificidad 2 !important 3 Buenas prácticas