Spécificité

1. Deux règles pour un élément

Voici un paragraphe, et deux règles qui le ciblent toutes les deux.

<p class="intro">Bienvenue sur mon site.</p>

.intro {
    color: blue;
}

p {
    color: red;
}

Le paragraphe ne peut pas être bleu et rouge à la fois. Pourtant, il n’y a pas d’erreur : le navigateur choisit une règle, et le texte s’affiche en bleu.

On pourrait croire que la dernière règle gagne. Ce n’est pas le cas ici : la règle .intro est plus spécifique que la règle p. Elle vise un groupe plus précis d’éléments, ceux qui portent la classe intro, là où p vise tous les paragraphes.

2. Le sélecteur d’id

Il nous manque un sélecteur pour faire la pesée. L’attribut id donne un nom à un élément, comme class, mais ce nom doit être unique dans la page : un seul élément peut le porter.

<nav id="menu">…</nav>

En CSS, l’id s’écrit précédé d’un dièse.

#menu {
    background: gold;
}

Une classe se partage entre plusieurs éléments, un id désigne un élément et un seul. C’est ce qui le rend si spécifique.

3. Le poids d’un sélecteur

Pour départager deux règles qui ciblent le même élément, on pèse leurs sélecteurs. Chaque morceau du sélecteur a un poids.

Le poids d’un sélecteur, c’est la somme des poids de ses morceaux.

La règle dont le sélecteur pèse le plus l’emporte, quel que soit l’ordre dans lequel les règles sont écrites. Dans le premier exemple, .intro pèse 1 et p pèse 0,1 : le bleu l’emporte.

Le navigateur compte autrement, mais il arrive au même résultat tant qu’un sélecteur a moins de dix balises et moins de mille classes, ce qui n’arrive jamais.

4. En cas d’égalité

Quand deux sélecteurs ont le même poids, c’est la dernière règle écrite qui l’emporte.

.important {
    color: blue;
}

.intro {
    color: orange;
}

Un paragraphe <p class="intro important"> s’affiche en orange. Les deux sélecteurs pèsent 1, et .intro est écrit après.

L’ordre des classes dans l’attribut class ne compte pas. Seul compte l’ordre des règles dans le CSS.

5. Ce que les poids nous disent

Ces poids ne sont pas qu’un calcul. Ils disent comment écrire une feuille de style qui reste facile à modifier.

• La classe est le sélecteur par défaut. Elle pèse 1, elle se partage entre plusieurs éléments, et on peut toujours en ajouter une pour être plus précis.
• L’id est énorme. Avec ses 1000, une règle qui en contient un écrase toutes les autres. Pour la contrer, il faudrait un autre id, et la feuille de style devient une course aux armements.
• La balise va nous embêter. Une règle p touche tous les paragraphes du site, y compris ceux qu’on avait oubliés. On la garde pour les réglages généraux, la police ou les marges par défaut.

6. S’entraîner avec le Duel de sélecteurs

Dans ce jeu, deux règles ciblent le même élément. À vous de dire laquelle l’emporte, ou s’il y a égalité. Les duels sont tirés au hasard et ne s’arrêtent jamais.