Spécificité et ordre

Deux règles donnent deux couleurs différentes au même lien : laquelle l'emporte ? Le navigateur tranche en trois étapes.

1. Le poids du sélecteur : la spécificité

Chaque sélecteur reçoit trois nombres (a, b, c) :

On compare a d'abord, puis b, puis c :

#menu a            /* (1, 0, 1) */
.lien-actif        /* (0, 1, 0) : perd, a vaut 0 contre 1 */
#menu .lien-actif  /* (1, 1, 0) : gagne contre (1, 0, 1) */

Un seul identifiant bat n'importe quel nombre de classes. C'est pourquoi on évite les #id dans les feuilles de style : ils rendent les règles très difficiles à surcharger ensuite.

2. À poids égal : la dernière règle écrite

.note { color: red; }
.note { color: navy; }     /* gagne : même spécificité, écrite après */

3. !important, en dernier recours

!important passe devant toute spécificité. Le problème : pour le surcharger, il faut un autre !important, et la feuille devient une surenchère impossible à maintenir. On l'évite ; le bon réflexe face à une règle qui « ne s'applique pas » est de comparer les spécificités.

Le style écrit dans l'attribut style="..." d'un élément passe devant toutes les règles de la feuille, sauf !important.