Comprendre le poids des sélecteurs CSS

En CSS, selon l’endroit où vous définissez une règle de style, celle-ci a un « poids » bien particulier ? Ceci est très important à connaitre car il peut donner lieux à des incohérences entre ce que vous pensiez obtenir, et ce que vous obtenez réellement.

C’est quoi au juste cette histoire de poid ?

Commençons par un petit rappel. Nous savons qu’en CSS il existe trois méthodes pour cibler un élément, L’identifiant (id), la classe (class), ou l’élément lui même.

#mon_id{ color : red; } /* Sélection d'un identifiant (id) */
.ma_class{ color : purple; } /* Sélection d'une classe (class) */
section{ color : purple; } /* Sélection d'un élément (la balise HTML) */

Il est possible pour cibler un élément de façon précise de se baser sur des liens de parenté. Par exemple, nous pourrons cibler une balise HTML enfant d’un élément possédant une classe lui même enfant d’un élément possédant un identifiant. Dans l’exemple suivant, nous ciblons l’élément <h1> dont le parent possède l’attibut class="ma_class" et dont le grand-parent possède l’attribut id="mon_id".

#mon_id .ma_class h1 { color : purple; }

Chacun des éléments composant le sélecteur possède une valeur :

• l’élément html possède une valeur de 1
• la classe possède une valeur de 10
• l’identifiant possède une valeur de 100

Nous pouvons ainsi définir un poid à notre déclaration en additionnant simplement l’ensemble des valeur de nos sélecteurs. Nous obtenons donc : 100 (identifiant) + 10 (classe) + 1 (élément HTML) = 111

Mais, à quoi ça sert ?

La réponse est simple, plus une déclaration a un poids élevé, plus elle est prioritaire sur une autre, peu importe l’ordre de déclaration.

Jusqu’ici nous savions que pour une même déclaration, la dernière citée dans notre feuille de style prenait la priorité sur les autres. “C’est le dernier qui parle qui a raison” en quelque sorte. Ainsi, dans l’exemple suivant, l’élément possédant l’attribut class = « ma_class » sera affiché en bleu.

.ma_class { color : red; }
.ma_class { color : green; }
.ma_class { color : blue; }

Imaginons maintenant que le même élément possède l’attribut class="ma_class" et l’attribut id="mon_identifiant".

#mon_identifiant { color : red; }
.ma_class { color : green; }

En nous basant sur la logique de la valeur des sélecteurs, la déclaration par l’identifiant possède une valeur de 100 tandis que celle par la classe possède une valeur de 10. Notre élément sera donc affiché en rouge même si la couleur verte est définie en seconde.

Passons à un cas concret

Basons notre exemple sur le code HTML suivant :

<ul id="menu">
	<li class="color"><a href="#">Lien 1</a></li>
	<li><a href="#">Lien 2</a></li>
	<li><a href="#">Lien 3</a></li>
	<li><a href="#">Lien 4</a></li>
	<li><a href="#">Lien 2</a></li>
</ul>

Maintenant imaginons un code css définissant que l’élément <a> doit être affiché en couleur rouge :

#menu a { color:red; }

dont la valeur est équivalent à :
100 (pour l’identifiant) + 1 (pour l’élément HTML) = 101

Ce que nous souhaitons maintenant c’est définir le lien ayant la classe « color » en vert, si nous cherchons à le définir de la façon suivant :

.color a { color:green; }

Notre élément <a> restera affiché en rouge puisqu’elle possède une valeur inférieur à la valeur initiale définie à 101 :
10 (pour la classe) + 1 (pour l’élément HTML) = 11

Pour que notre élément prenne la couleur verte, nous devrons simplement écrire :

#menu .color a{ color:green; }

Ce qui pourra se calculer de la façon suivante :
100 (pour l’identifiant) + 10 (pour la classe) + 1 (pour l’élément) = 111

La valeur finale étant plus élevée que la valeur initiale, elle prendra la priorité.

.color a { color:green !important; }