EN
CSS - !important rule
0
points
In this article, we would like to show you how to !important rule in CSS.
Quick solution:
#id {
background: green;
}
.class {
background: red;
}
div {
background: yellow !important; /* overrides #id and .class background for all div elements */
}
Practical example
In this section, we present a practical example of !important rule that overrides all previous styling rules for the specific property (background) on that element (div).
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
#my-id {
background: green;
}
.my-class {
background: red;
}
div {
margin: 5px;
background: yellow !important; /* overrides #id and .class background */
}
</style>
</head>
<body>
<div id="my-id">div element with #my-id</div>
<div class="my-class">div element with .my-class</div>
<div>div element</div>
</body>
</html>
Note:
Don't use
!importantif it's not necessary because it makes the CSS code confusing and hard to debug.