Spécificité CSS
Vous savez déjà écrire des sélecteurs. Dans les vraies feuilles, les règles s’entrechoquent : deux règles visent le même élément et la même propriété. Le navigateur ne tire pas au sort — il utilise la spécificité, et en cas d’égalité l’ordre dans le fichier.
Que signifie spécificité ?
La spécificité est un poids que le navigateur donne à un sélecteur. En conflit, le sélecteur plus lourd gagne pour cette propriété. Pour le quotidien, retenez cette échelle : style en ligne > id > class (et attribut / pseudo-classe) > element (et pseudo-élément). Le * et les combinateurs n’ajoutent pas de poids à eux seuls.
Classement en un coup d’œil
Apprenez d’abord cet ordre. Il y a plus de détails, mais la plupart des blocages débutants se résolvent avec cette échelle.
📊 Classement de spécificité CSS (quotidien)
| Type | Exemples | Bat souvent |
|---|---|---|
| Style en ligne | style="color: red" |
Presque tout dans la feuille |
| Id | #hero, #nav |
Classes et éléments |
| Class / attribut / pseudo-classe | .card, [type="email"], :hover |
Sélecteurs d’élément |
| Element / pseudo-élément | p, h1, ::before |
Seulement des règles plus faibles ou égales (puis ordre source) |
class bat element
Un sélecteur de type est large. Une class est plus précise — la couleur de la class gagne. L’ordre ne compte que lorsque les poids sont égaux.
class gagne sur element
cssp {
color: #334155;
}
.note {
color: #0f766e;
}Lire le conflit
Pour <p class="note"> les deux règles correspondent. .note est une class ; p un element. La class gagne → texte teal.
id bat class
Un id est plus lourd qu’une class. Pour un design réutilisable préférez class ; gardez id pour un crochet unique.
id gagne sur class
css.note {
color: #0f766e;
}
#title {
color: #9f1239;
}Pourquoi c’est important
Si <h1 id="title" class="note"> devient bordeaux, l’id a gagné — pas par « sentiment d’importance », mais par poids plus élevé.
Poids égal → la règle suivante gagne
Quand deux règles ont la même spécificité, celle qui apparaît plus tard dans le CSS gagne pour cette propriété.
Même poids — l’ordre source décide
css.card {
border-color: #cbd5e1;
}
.card {
border-color: #0f766e;
}Habitude en cas d’égalité
Les deux sélecteurs sont une class. La deuxième règle .card gagne → bordure teal. Si vous vouliez la première couleur, vérifiez qu’un sélecteur plus fort ne correspond pas aussi.
Sélecteurs combinés en pratique
Les sélecteurs se combinent : nav a.button:hover est plus fort qu’un a seul parce qu’il ajoute class et pseudo-classe. Pas besoin de calculatrice à chaque ligne — demandez : « Y a-t-il un id ? Une class en plus ? Ou seulement des balises ? »
Sélecteur combiné bat element nu
cssa {
color: #334155;
}
nav a.button {
color: #0f766e;
}À propos de !important
!important peut contourner la spécificité normale. Extincteur, pas outil quotidien. Trop l’utiliser rend les changements douloureux. Corrigez d’abord la structure et des sélecteurs plus clairs.
Bonnes habitudes
- Pour l’apparence class ; id pour un crochet unique
- Bloqué ? Regardez sur quel barreau de l’échelle se trouve chaque sélecteur
- Poids égal → regardez la règle plus bas dans le fichier
- N’empilez pas de longues chaînes juste pour « gagner » — elles cassent quand le HTML change
- Gardez
!importantpour la fin, pas pour le début
Essayez vous-même
- Page avec
<p class="note">Bonjour</p>,<h1 id="title" class="note">Titre</h1>et<a class="button">Go</a>dans<nav>. - Ajoutez la paire element vs class (
pgris,.noteteal) — le paragraphe note doit être teal. - Ajoutez
#title { color: #9f1239; }— le titre devient bordeaux malgré.note. - Écrivez deux règles
.cardpourborder-color— la seconde gagne. - Optionnel : comparez
a { … }etnav a.button { … }sur un lien du nav.
Erreurs fréquentes
- Croire que « plus de déclarations » augmente la spécificité — non
- Supposer que le dernier fichier bat toujours un id — le poids plus élevé gagne encore
- Faire de
#toutou!importantle correctif par défaut - Confondre les barreaux (traiter class comme element)
- Oublier qu’à poids égal on revient à l’ordre source
Résumé
- La spécificité décide les conflits sur la même propriété
- Échelle quotidienne : inline > id > class/attribut/pseudo-classe > element/pseudo-élément
- Poids égal → règle suivante
- Pour l’apparence, class ; id et
!importantrares - Lisez d’abord le barreau, puis l’ordre
- Entraînez-vous avec
p/.note/#titlejusqu’à ce que le gagnant soit évident
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut