CSS !important
!important in CSS wordt gebruikt om meer belang toe te voegen aan een eigenschap of waarde dan normaal. In feite, als je de!important gebruikt, zal deze alle eerdere styling regels voor die specifieke eigenschap op dat element overschrijven!.
Voorbeeld:
<!DOCTYPE html>
<html>
<head>
<style>
#mijnid {
background-color: tomato;
}
.mijnclass {
background-color: gray;
}
p {
background-color: yellow !important;
}
</style>
</head>
<body>
<h2>CSS !important</h2>
<p>Dit is een tekst in een paragraaf.</p>
<p id="mijnid">Dit is een tekst in een paragraaf.</p>
<p class="mijnclass">Dit is een tekst in een paragraaf.</p>
<i>Probeer !important maar eens te verwijderen en zie het resultaat ervan.</i>
</body>
</html>
 |
Voorbeeld uitgelegd |
In het bovenstaande voorbeeld zien we dat alle drie de paragrafen een gele achtergrondkleur krijgen, ook al hebben de ID-selector en de class-selector een hogere specificiteit. De !important regel overschrijft in beide gevallen de eigenschap background-color.
!important over !important
De enige manieer om een!important regel te negeren is om een andere !important regel op te nemen. Er zit hier wel een nadeel aan want dit maakt de css-code verwarrend en het opsporen van fouten zal een probleem worden vooral als je een groot stijlblad hebt!
Voorbeeld:
<!DOCTYPE html>
<html>
<head>
<style>
#mijnid {
background-color: tomato !important;
}
.mijnclass {
background-color: gray !important;
}
p {
background-color: yellow !important;
}
</style>
</head>
<body>
<h2>CSS !important</h2>
<p>Dit is een tekst in een paragraaf.</p>
<p id="mijnid">Dit is een tekst in een paragraaf.</p>
<p class="mijnclass">Dit is een tekst in een paragraaf.</p>
</body>
</html>
 |
Gebruik de !important regel alleen als het echt noodzakelijk is, probeer het zoveel mogelijk te vermijden als het echter niet kan probeer het dan pas te gebruiken. |
