Ce que fait !important
Ajouter !important après une valeur fait gagner cette déclaration sur toutes les déclarations normales de la même propriété sur le même élément. La spécificité du sélecteur et l'ordre dans le code ne comptent plus.
Sans !important, le sélecteur d'ID gagnerait et le texte serait bleu. Supprimez !important dans l'éditeur pour le vérifier.
Syntaxe
selector {
property: value !important;
}
Il se place après la valeur et avant le point-virgule. Il ne s'applique qu'à cette déclaration, pas à toute la règle. Il fonctionne aussi dans les raccourcis (margin: 0 !important; rend les quatre côtés importants) et dans un attribut style.
Qui l'emporte sur qui
Pour les styles écrits par l'auteur de la page, du plus faible au plus fort :
| Rang | Déclaration | Exemple |
|---|---|---|
| 1 | Déclaration normale dans une feuille de style | p { color: blue; } |
| 2 | Déclaration normale dans un attribut style | <p style="color: blue"> |
| 3 | !important dans une feuille de style | p { color: blue !important; } |
| 4 | !important dans un attribut style | <p style="color: blue !important"> |
À rang égal, la spécificité décide, puis l'ordre d'apparition des déclarations : la dernière gagne.
C'est le seul usage courant légitime de !important : surcharger un style inline que vous ne pouvez pas modifier, par exemple celui écrit par un widget tiers.
Quand deux déclarations sont !important
!important contre !important revient aux règles habituelles : la spécificité la plus haute gagne, et en cas d'égalité la dernière déclaration l'emporte.
C'est ainsi que !important entraîne une surenchère : dès qu'une règle l'utilise, celle qui doit la surcharger doit l'utiliser aussi, et la spécificité recommence à grimper.
La spécificité CSS en un tableau
La spécificité est le poids d'un sélecteur. Comptez trois nombres :
| Colonne | Ce qui compte | Exemple de sélecteur | Spécificité |
|---|---|---|---|
| A | Sélecteurs d'ID | #nav | (1,0,0) |
| B | Classes, attributs, pseudo-classes | .btn, [type="text"], :hover | (0,1,0) chacun |
| C | Sélecteurs de type, pseudo-éléments | p, ::before | (0,0,1) chacun |
| aucune | *, combinateurs (>, +, ~, espace) | *, ul > li | n'ajoutent rien |
Comparez d'abord la colonne A ; en cas d'égalité seulement, regardez B, puis C. Ainsi #nav a (1,0,1) bat .menu .item .link a (0,3,1) : un ID pèse plus que n'importe quel nombre de classes.
Comprendre ce tableau permet d'éviter !important : la plupart des problèmes du type « mon CSS ne s'applique pas » viennent d'une règle plus spécifique ailleurs, visible dans le panneau Styles des DevTools avec votre déclaration barrée.
Des alternatives plus propres
- Égalez la spécificité, puis comptez sur l'ordre. Chargez votre feuille de style après celle de la bibliothèque et utilisez un sélecteur au moins aussi spécifique.
- Baissez la spécificité de l'autre règle avec
:where(). Tout ce qui est dans:where()compte pour zéro, donc les styles de base écrits avec lui sont faciles à surcharger. - Utilisez une variable CSS comme point d'accroche. Un composant qui lit
var(--btn-bg)peut être personnalisé sans combattre ses sélecteurs. Voir les variables CSS.
Définir !important depuis JavaScript
element.style.color = 'red !important' ne fonctionne pas : la valeur est invalide et ignorée. Utilisez setProperty avec un troisième argument :
el.style.setProperty('color', '#f59e0b', 'important');
Erreurs courantes
- Le mettre au mauvais endroit.
color: !important red;est invalide ; il se place après la valeur. - L'utiliser dans
@keyframes. Les déclarations marquées!importantdans des keyframes sont ignorées. - Régler chaque conflit avec lui. Trouvez la règle gagnante dans les DevTools et égalez ou réduisez plutôt sa spécificité.
- Croire qu'il agit sur une autre propriété.
color: red !importantne fait rien pourbackground. - Oublier qu'un
!importantinline bat le vôtre. Aucune règle des feuilles de style de la page ne peut surchargerstyle="color: red !important"; modifiez l'attribut lui-même, par exemple avec JavaScript.
Questions fréquentes
À quoi sert !important en CSS ?
Il donne à une déclaration la priorité sur toutes les déclarations normales de la même propriété sur le même élément, quels que soient la spécificité du sélecteur et l'ordre. Écrivez-le après la valeur : color: red !important;.
Comment surcharger un !important ?
Avec une autre déclaration !important de spécificité plus élevée, ou de même spécificité et placée plus loin dans la feuille de style. Un style inline avec !important l'emporte sur tous les !important des feuilles de style.
!important l'emporte-t-il sur les styles inline ?
Oui. Une déclaration de feuille de style avec !important bat une déclaration normale dans un attribut style. Elle ne bat pas une déclaration inline elle-même marquée !important.
Utiliser !important est-il une mauvaise pratique ?
Pour gagner une bataille de spécificité, oui : la surcharge suivante aura aussi besoin de !important, et la feuille de style devient difficile à modifier. C'est raisonnable pour les classes utilitaires qui doivent toujours s'appliquer (comme .hidden), pour surcharger des styles inline tiers et dans les feuilles de style utilisateur.
Comment se calcule la spécificité CSS ?
Comptez trois colonnes : les sélecteurs d'ID, puis les classes, attributs et pseudo-classes, puis les sélecteurs de type et les pseudo-éléments. Comparez colonne par colonne depuis la gauche, donc #nav a (1,0,1) bat .menu .item a (0,2,1). Le sélecteur universel * et les combinateurs n'ajoutent rien.
