les règles de priorité en cas de conflit de valeurs
la cascade
Le terme de cascade apparaît dans le nom du langage css. C'est une notion importante pour comprendre quelle valeur va être appliquée lorsqu'il y a conflit, qu'elle est définie plusieurs fois.
Les style css sont définis à plusieurs niveaux, dans l'ordre, du moins au plus prioritaire:
- style par défaut du navigateur
- feuille de style intégrée ou styles insérés dans le <head> de la page, à l'aide de la balise <style>
- styles en ligne, à l'aide de l'attribut style d'un élément
- styles définis par l'utilisateur final, par le biais de son navigateur
les déclaration des feuilles de style intégrée ou styles insérés dans le <head> écraseront les styles du navigateur. Si plusieurs déclarations se contredisent dans les fichiers css ou le head le style déclaré en dernier dans la page html l'emportera. Les feuilles de styles seront elles-mêmes écrasées par d'éventuelles nouvelles valeurs décrites "en ligne", dans les éléments html. Enfin, l'utilisateur peut écraser n'importe quelle valeur à l'aide de ses propres réglages.
agent utilisateur < l'auteur < utilisateur
Il y a cependant 2 points à prendre en compte, qui peuvent perturber l'ordre de cascade:
La spécificité du sélecteur
La règle de cascade n'est appliquée qu'à spécificité égale des sélecteurs. Un sélecteur est construit à l'aide de noms d'élément, de classe, d'ID, de pseudo-classes,... Certains sélecteurs ont plus de poids que d'autre et donc, ils surpasseront des déclarations de moindre poids.
Pour déterminer la spécificité:
- On compte le nombre d'ID => priorité au nombre le plus élevé
- On compte le nombre de classes et pseudo-classes => priorité au nombre le plus élevé
- On compte le nombre d'éléments et pseudo-éléments => priorité au nombre le plus élevé
- On ignore le sélecteur universel (*)
Exemple:
color: red;
}
1 ID (#content), 2 classe+pseudo-classe (.on :hover), 3 éléments (nav li a) => 123
Il surpassera ce sélecteur:
color: green;
}
0 ID, 4 classe+pseudo-classe (.on :hover .verte .gras), 3 éléments (nav li a) => 33
mais pas celui-ci:
color: red;
}
2 ID, 0 classe+pseudo-classe, 1 éléments (a) => 200
Important: on peut augmenter la spécificité d'un sélecteur en répétant, par exemple, un nom d'id:
color: red;
}
Cela peut s'avérer utile lors de redéfinitions des style pour une version mobile, par exemple.
La déclaration !important
L'ajout d'un !important, entre la valeur et le ; permet de surpasser les règles de cascade et de spécificité (pour autant qu'il n'y ait pas d'autres valeurs comportant un !important auquel cas, on retrouve les règles de cascade et spécificités appliquées):
color: red !important;
}
