CSS La règle !important
Règle CSS !important
La règle !important est utilisée pour donner à la valeur d'une propriété spécifique la plus haute priorité.
La règle !important remplace TOUTES les règles de style précédentes pour cette propriété spécifique sur cet élément !
Le mot-clé !important est ajouté à la fin d'une déclaration CSS, avant le point-virgule.
Syntaxe
sélecteur {
propriété: valeur !important;
} Exemple de Règle CSS !important
Dans l'exemple suivant, les trois paragraphes auront une couleur de fond jaune, même si le style en ligne, le sélecteur d'identifiant et le sélecteur de classe ont une spécificité plus élevée. La règle !important remplace TOUTES les règles de style pour cette propriété spécifique sur cet élément !
Exemple
Utilisation de la règle !important :
<html>
<head>
<style>
p {
background-color: yellow !important;
}
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
</style>
</head>
<body>
<p style="background-color:orange;">Ceci est un paragraphe.</p>
<p class="myclass">Ceci est un paragraphe.</p>
<p id="myid">Ceci est un paragraphe.</p>
</body>
</html>
Utilisez !important avec parcimonie
Le seul moyen de remplacer une règle !important est d'inclure une autre règle !important dans une déclaration ayant la même (ou une plus grande) spécificité dans le code source - et c'est là que le problème commence !
Le code CSS sera confus et le débogage sera difficile ! Surtout si vous avez une grande feuille de style !
Dans l'exemple suivant, il n'est pas très clair quelle couleur est considérée comme la plus importante :
Exemple
p {
background-color: red !important;
}
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
Quelques usages appropriés de !important
La règle !important peut être utile dans certains cas, comme :
1. Pour remplacer un style qui ne peut pas être modifié d'une autre manière. Cela peut se produire si vous travaillez dans un Système de Gestion de Contenu (CMS) et ne pouvez pas modifier le code CSS. Vous pouvez alors définir des styles personnalisés pour remplacer certains des styles du CMS.
2. Pour respecter les préférences des utilisateurs. Certains utilisateurs ont une sensibilité au mouvement et préfèrent les sites Web avec moins d'animations. CSS dispose d'une fonctionnalité @media appelée prefers-reduced-motion qui vous permet de vérifier si un utilisateur a demandé à réduire le mouvement, comme les animations ou les transitions. Vous pouvez utiliser !important pour désactiver ou atténuer les animations et les transitions pour les utilisateurs qui ont activé ce paramètre sur leur ordinateur :
Exemple
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
} Vous en apprendrez plus sur les requêtes média dans un chapitre ultérieur.
3. Pour créer un style très spécifique et inchangeable pour un élément particulier. Supposons que nous voulions un aspect spécial pour tous les boutons de lien sur une page :
Exemple
Styliser les boutons de lien avec une couleur de fond grise, un texte blanc, et un peu de rembourrage et de bordure :
a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}
Maintenant, si nous plaçons un bouton de lien à l'intérieur d'un autre élément avec une spécificité plus élevée, les propriétés pourraient entrer en conflit. Voici un exemple :
Exemple
a.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
text-decoration: none;
}
#myDiv a {
color: red;
background-color: yellow;
}
Pour "forcer" tous les boutons à avoir le même aspect, peu importe quoi, nous pouvons ajouter la règle !important aux propriétés du bouton, comme ceci :
Exemple
a.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
text-decoration: none !important;
}
#myDiv a {
color: red;
background-color: yellow;
}