La spécificité en CSS

Introduction

Entre les deux déclarations ci-dessous, à votre avis, laquelle sera appliquée sur l’élément de liste <li> ?

.page .menu li {color: red;}
body div.menu ul li {color: blue;}

Si les deux déclarations désignent bien le même élément, l’une est prioritaire sur l’autre et du style de la première déclaration dont va hériter l’élément de liste. La couleur bleue de la deuxième déclaration ne sera pas appliquée.
Si la première déclaration (.page .menu li) prend le pas sur la deuxième (body div.menu ul li) c’est que le calcul de spécificité lui donne plus d’importance.

La spécificité

La spécificité d’une déclaration est un calcul qui indique le « poids » d’une déclaration.
Ce « poids » est alors utilisé pour comparer les différentes déclarations entre-elles et savoir laquelle est prioritaire sur l’autre, laquelle a le plus de « poids ».

Le calcul de la spécificité

Le calcul se fait :

• en fonction de 3 types d’éléments qui composent une déclaration (ID, class, élément balise)
• sur 3 chiffres concaténés

Pour connaitre le premier des trois chiffres concaténés, il faut compter le nombre d’ID dans la déclaration (a).
Pour le deuxième chiffre, il faut compter le nombre de class (b).
Enfin, le troisième chiffre est donné par le nombre d’élément balise (c).

Le poids d’une déclaration est le nombre donné par ces trois résultats mis côte à côte (abc).

Dans notre exemple :

• .page .menu li {color: red;}
  • Nombre d’ID : 0 (donc a=0)
  • Nombre de class : 2 (donc b=2)
  • Nombre d’élément : 1 (donc C=1)

  Le poids de cette déclaration est donc de 21 (021).

• body div.menu ul li {color: blue;}
  • Nombre d’ID : 0 (donc a=0)
  • Nombre de class : 1 (donc b=1)
  • Nombre d’élément : 4 (donc C=4)

  Le poids de cette déclaration est donc de 14 (014).

La première déclaration est donc bien prioritaire sur la deuxième.

Quelques exemples :

• #contenu #contenu-principal La spécificité est de 200 (a=2 ; b=0 ; c=0)
• div.informations #mentions p.important span La spécificité est de 123 (a=1 ; b=2 ; c=3)

Et comme une image (ludique) vaut toujours mieux qu’un long discours : Specificity Wars

Conclusion

Cela nous permet de comprendre pourquoi, dans certains cas « inexplicable » notre déclaration ne s’applique pas alors qu’elle ne contient aucune erreur. L’élément cible hérite en fait d’une déclaration ayant une spécificité plus forte.
Parfois, ces problèmes peuvent simplement se régler en « surchargeant » la déclaration afin de lui donner plus de poids. Attention néanmoins à ne pas avoir le réflexe de trop charger ses déclarations (pour éviter ce type de désagrément) au point d’avoir des déclarations très fortes et peu souples.