Especificidad CSS

La Real Academia Española define la especificidad como la cualidad y condición de ser específico, o lo que es lo mismo: concreto, determinado. En los últimos años, los expertos en CSS se han apropiado de este término para denominar la cualidad que hace que un estilo prime sobre otro cuando

Artículos recientes

La Real Academia Española define la especificidad como la cualidad y condición de ser específico, o lo que es lo mismo: concreto, determinado. En los últimos años, los expertos en CSS se han apropiado de este término para denominar la cualidad que hace que un estilo prime sobre otro cuando ambos deberían afectar a un mismo elemento.

El principio en el que se basa es simple: el elemento más específico gana. Parece claro que una clase definida específicamente para un elemento html (como p .intro { }) prima sobre la definición general de ese elemento en la hoja de estilos (que sería p {}). Pero, ¿y dos etiquetas html frente a un id? (como por ejemplo div p {} y ``#cabecera {}), ¿por qué este elemento no sale como debería?. Esa es la clase de preguntas que responde la especificidad.

¿Cómo se calcula? Asignando un valor a cada tipo de elemento:

  • Un selector HTML tiene una especificidad de 1.
  • Dos selectores HTML tienen una especificidad de 2, es decir que se aplica siempre el selector con más elementos.
  • Un selector de clase tiene una especificidad de 10.
  • Dos selectores HTML con un selector de clase tienen una especificidad de 10 + 1 + 1.
  • Un selector id tiene una especificidad de 100.

Una vez asignados estos valores, éstos se suman para calcular el total (véanse ejemplos en htmldog y csstricks ) o se comparan por separado (véase un ejemplo de esto último en Smashing Magazine).

Por último, os recomendamos esta simpática chuleta de especificidad CSS ambientada en Star Wars.