4.6 Priorité CSS

<p class="message" id="introduction">
Sur le site ex-Nihilo, je trouve mes tutos HTML et CSS.
</p>

Nous pouvons modifier ce paragraphe simplement en utilisant son nom de balise :

p{ color: blue;}

Ou nous pouvons utiliser le nom de classe qui l’affecte :

.message{ color: green;}

Ou nous pouvons utiliser son identifiant – id:

#introduction{ color: red;}

Étant donné que le navigateur ne peut choisir qu’une couleur à appliquer à ce paragraphe, il lui appartient de choisir la règle CSS prioritaire par rapport aux autres. Il s’agit de la priorité CSS (ou la spécificité CSS).

Dans notre exemple, le paragraphe sera rouge car un sélecteur #id est plus spécifique et donc plus important que les autres sélecteurs.

Ordre de règles CSS

Si des sélecteurs similaires sont dans votre CSS, le dernier défini sera prioritaire.

p{ color: green;}
p{ color: red;}
/* p - paragraphe - sera rouge */

La mesure 100

Un moyen rapide de déterminer la « puissance » d’une règle CSS est de mesurer la spécificité des sélecteurs :

• Les sélecteurs #id valent 100
• Les sélecteurs .class valent 10
• Les sélecteurs tag valent 1

Le sélecteur avec le «score» le plus élevé prévaudra, quel que soit l’ordre dans lequel les règles CSS apparaissent.

#introduction { color: red ;}
.message { color: green;}
p { color: blue;}

<p class="message" id="introduction">
Sur le site ex-Nihilo, je trouve mes tutos HTML et CSS.
</p>

La règle #introduction{ color: red;} est plus spécifique que les autres, car les identifiants – ids – doivent être uniques dans une page Web et ne peuvent donc cibler qu’un seul élément.

.message{ color: green;} peut cibler n’importe quel élément HTML avec un attribut class="message" et est par conséquent moins spécifique. Il en va de même pour p{ color: blue;} qui peut cibler n’importe quel paragraphe HTML.

Comment éviter les conflits

Lors de l’écriture de votre CSS, il est facile d’écrire des règles contradictoires, dans lesquelles la même propriété est appliquée plusieurs fois.

Pour éviter cela :

• utiliser uniquement des classes : utilisez .introduction au lieu de #introduction, même si cet élément n’apparaît qu’une seule fois dans votre page Web
• évitez d’appliquer plusieurs classes sur un seul élément HTML : n’écrivez pas <p class="big red important"> mais plutôt <p class="title"> ce qui est plus descriptif sémantiquement
• n’utilisez pas de styles en ligne comme <div style="background: blue;">