La especificidad en CSS es el mecanismo que decide qué reglas se aplican a un elemento cuando existen conflictos entre selectores. Cuando un navegador encuentra varias reglas que coinciden con el mismo elemento, debe determinar cuál de ellas tiene mayor prioridad para aplicarla correctamente. Para ello, compara el “valor” de cada selector mediante un sistema de puntuación basado en su tipo (selectores de ID, clases, elementos, etc.).

Como desarrollador, comprender la especificidad es clave para escribir estilos predecibles y evitar sorpresas en la apariencia de una página. Sin un buen conocimiento de cómo funcionan estas reglas, es fácil caer en problemas como estilos que no se aplican como se espera o la necesidad de usar !important de manera innecesaria. Tener claro cómo el navegador resuelve estos conflictos permite estructurar mejor el CSS y facilita su mantenimiento a largo plazo.

La jerarquía de especificidad

La jerarquía se organiza en niveles que, en general, se pueden resumir de la siguiente manera:

1. Estilos en línea (inline): Se aplican directamente en el atributo style de un elemento y tienen la mayor prioridad.
2. Selectores de ID: Tienen una puntuación alta, por lo que prevalecen sobre selectores basados en clases o etiquetas.
3. Selectores de clases, atributos y pseudoclases: Contribuyen con una puntuación menor que los ID.
4. Selectores de elementos y pseudoelementos: Tienen la puntuación más baja en la cadena de especificidad.

Esta jerarquía garantiza que los estilos definidos de forma más directa o específica tengan preferencia sobre reglas más generales.

Cómo se calcula la puntuación de especificidad

La puntuación en CSS se representa como un cuarteto numérico (a, b, c, d), donde:

• a: Número de estilos en línea (style="...").
• b: Número de selectores de ID.
• c: Número de selectores de clases, atributos y pseudoclases.
• d: Número de selectores de elementos y pseudoelementos.

Cuando dos selectores coinciden con el mismo elemento, el navegador compara sus puntuaciones y aplica el estilo del selector con mayor especificidad. Veamos un ejemplo comparativo con selectores que afectan al mismo elemento.

Comparación de selectores

Veamos un ejemplo con dos selectores en conflicto:

El código HTML:

<section id="contenedor">
  <div class="titulo">
    <h1>Título</h1>
  </div>
</section>

Una regla CSS

#contenedor .titulo h1 {
  color: blue;
}

Otra regla CSS

section .titulo h1 {
  color: red;
}

Ambos selectores apuntan a un <h1> dentro de .titulo, pero uno usa un ID (#contenedor) y el otro un selector de elemento (section). Para cada selector contamos cuántos hay:

• Estilos inline ninguno de los dos tiene.
• Con ID solo hay uno el de la primera regla #contenedor, ponemos un 1.
• Las dos reglas tienen una clase .titulo por lo que ponemos un 1 a cada una.
• La primera regla tiene 1 selector de tipo elemento h1 mientras que la segunda tiene 2 section y h1.

Resumiendo:

¿Cuál gana y por qué?

El primer selector (#contenedor .titulo h1) tiene un ID, lo que le da una puntuación más alta (0, 1, 1, 1) frente al segundo selector (0, 0, 1, 2).

Resultado: El color azul del primer selector prevalecerá sobre el rojo del segundo debido a la mayor especificidad del ID.

Consideraciones: la regla !important

Un aspecto a considerar es el uso de !important. Esta declaración puede anular la especificidad normal, forzando la aplicación de un estilo. Sin embargo, abusar de !important puede dificultar el mantenimiento del código, por lo que es recomendable utilizarla con precaución y solo en situaciones puntuales.

Conclusión

La especificidad en CSS es una herramienta útil para resolver conflictos entre reglas de estilo. Comprender cómo se calcula y cómo funciona la jerarquía de selectores permite escribir mejores hojas de estilo y detectar o depurar errores e caso de conflicto.