 |
 |
Effectuez une recherche sur la totalité du site :
Si vous souhaitez vous aussi écrire sur Game On Net et partager ainsi votre propre expérience, n'hésitez pas à nous contacter.
La spécificité
Les règles de la spécificité dans les déclarations CSS
lundi 14 mai 2007 par Nissone
Entre les deux déclarations ci-dessous, à votre avis, laquelle sera appliquée sur l’élément de liste < li> ?
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 :
Nombre d'ID : 0 (donc a=0)
Nombre de class : 2 (donc b=2)
Nombre d'élément : 1 (donc C=1)
Nombre d'ID : 0 (donc a=0)
Nombre de class : 1 (donc b=1)
Nombre d'élément : 4 (donc C=4)
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
Réagissez à cet article