forge numérique code et autres réflexions

CSS: la spécificité des sélecteurs

La spécificité permet de déterminer quel sélecteur aura préséance si plusieurs sélecteurs s’appliquent à un même élément.

Comment déterminer la spécificité? Sur la base 0.0.0:

• pour chaque id : additionnez 1 à la position 1
• pour chaque class ou pseudo-class (:hover) : additionnez 1 à la position 2
• pour chaque élément HTML : additionnez 1 à la position 3

Par exemple:

p { color: red; } /* un élément = 0.0.1 */
#content p { color: blue; } /* un id + un élément = 1.0.1 */

Ici, le premier sélecteur vaut 0.0.1 et le second 1.0.1, donc celui-ci aura préséance sur le premier.

D’autres exemples:

p a {  } /* 0.0.2 */
p a.big {  } /* 0.1.2 */
.text p a {  } /* 0.1.2 */
#content .text p a:hover {  } /* 1.2.2 */
div div div div div div div div div div p {  } /* 0.0.11 */

Si deux sélecteurs ont la même valeur, c’est le dernier qui aura préséance.

Une règle définie dans un attribut style (<p style="color:red;">) aura toujours préséance sur toutes les sélecteurs.

Vous pouvez lire le texte d’Eric Meyer sur la spécifité.

CSS-Tricks propose aussi un excellent article qui explique comment calculer la spécificité d’un sélecteur: Specifics on CSS Specificity.