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é 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 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 :

http://www.stuffandnonsense.co.uk/…/specificitywars-05v2.jpg

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 reflexe 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.

Aller plus loin :

Spécification CSS2 (traduction française) > Le calcul de la spécificité d’un sélecteur – http://www.yoyodesign.org/doc/w3c/css2/cascade.html#specificity