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.
