La spécificité CSS est un algorithme utilisé par les navigateurs pour déterminer quelle règle CSS s’applique à un élément HTML lorsque plusieurs règles entrent en conflit.
Elle fonctionne comme un « score » numérique attribué à chaque sélecteur.
Ce mécanisme détermine quelle règle CSS doit être appliquée à un élément HTML lorsqu’il y a plusieurs règles qui s’appliquent.
Les sélecteurs d’ID ont la plus haute spécificité, suivis des sélecteurs de classe et des sélecteurs d’élément.
Il est recommandé d’utiliser des sélecteurs de classe plutôt que des sélecteurs d’ID pour éviter les conflits de spécificité et rendre le code CSS plus facile à maintenir.
Tout sélecteur CSS doit être déclarer avec le moins de spécificité possible.
.myclass {} plutôt que .content > .myclass {}
| Type de sélecteur | Valeur approximative (notation simplifiée) | Exemple |
!important | Écrase tout (à éviter) | color: red !important; |
| Sélecteur d’ID | 1-0-0 | #header |
| Sélecteur de classe, attribut, pseudo-classe | 0-1-0 | .btn, [type="text"], :hover |
| Sélecteur d’élément, pseudo-élément | 0-0-1 | p, ::before |
Sélecteur universel, combinators (>, +, ~, espace) | 0 | *, .container > p |
Exemple de conflit résolu par spécificité
<div id="special" class="highlight">Texte</div>#special { color: red; } /* Spécificité : 1-0-0 */
.highlight { color: blue; } /* Spécificité : 0-1-0 */
div { color: green; } /* Spécificité : 0-0-1 */Résultat : le texte sera rouge, car #special a la spécificité la plus élevée.
Conseil d’architecture CSS
Adoptez une stratégie de spécificité plate :
- Toutes vos règles principales restent à
0-1-0(classes uniquement). - Utilisez des conventions comme BEM pour éviter les conflits :
.card { ... }
.card__title { ... }
.card--featured { ... }Cela rend le CSS prévisible, modulaire et facile à surcharger sans recourir à !important ou à des sélecteurs lourds.
Minimiser l’imbrication : chaque niveau supplémentaire augmente inutilement la spécificité.
/* Trop spécifique */
.page .content .article .title { font-size: 24px; }
/* Préférable */
.article-title { font-size: 24px; }Eviter les ID pour le style : Éviter les ID pour le style : leur haute spécificité rend difficile la surcharge.
/* À éviter */
#main-content .sidebar { … }