CSS La règle !importante
Ce qui est important?
La !importantrègle en CSS est utilisée pour ajouter plus d'importance à une propriété/valeur que la normale.
En fait, si vous utilisez la !importantrègle, elle remplacera TOUTES les règles de style précédentes pour cette propriété spécifique sur cet élément !
Prenons un exemple :
Exemple
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Exemple expliqué
Dans l'exemple ci-dessus. les trois paragraphes auront une couleur de fond rouge, même si le sélecteur d'ID et le sélecteur de classe ont une spécificité plus élevée. La !importantrègle remplace la
background-colorpropriété dans les deux cas.
À propos de !important
La seule façon de remplacer une !important
règle est d'inclure une autre !important
règle sur une déclaration avec la même spécificité (ou plus) dans le code source - et c'est là que le problème commence ! Cela rend le code CSS déroutant et le débogage sera difficile, surtout si vous avez une grande feuille de style !
Ici, nous avons créé un exemple simple. Il n'est pas très clair, quand on regarde le code source CSS, quelle couleur est considérée comme la plus importante :
Exemple
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Conseil : Il est bon de connaître la !important
règle, vous pouvez la voir dans certains codes sources CSS. Cependant, ne l'utilisez que si vous y êtes absolument obligé.
Peut-être une ou deux utilisations équitables de !important
Une façon d'utiliser !importantest si vous devez remplacer un style qui ne peut pas être remplacé d'une autre manière. Cela peut se produire si vous travaillez sur un système de gestion de contenu (CMS) et que vous ne pouvez pas modifier le code CSS. Ensuite, vous pouvez définir des styles personnalisés pour remplacer certains des styles CMS.
Une autre façon d'utiliser !importantest : Supposons que vous vouliez un look spécial pour tous les boutons d'une page. Ici, les boutons sont stylisés avec une couleur d'arrière-plan grise, du texte blanc et un peu de rembourrage et de bordure :
Exemple
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
L'apparence d'un bouton peut parfois changer si nous le plaçons dans un autre élément avec une spécificité plus élevée, et les propriétés entrent en conflit. En voici un exemple :
Exemple
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Pour "forcer" tous les boutons à avoir la même apparence, quoi qu'il arrive, nous pouvons ajouter la !important
règle aux propriétés du bouton, comme ceci :
Exemple
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}