Especificidad CSS

August 21st, 2008

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áticachuleta de especificidad CSS ambientada en Star Wars.

Categorí­a: Diseño web