❮❮ PREV NEXT ❯❯

CSS - !important

We have already seen Specificity in the previous tutorial that describes the priority of the CSS rules.

Now, if you want to override the default priority of the CSS rule and make a rule get the hightest priority, you can mark it with !important.

And the !important rule will make it the highest priority.

What is !important in CSS?

The !important keyword is used to increase the priority of a CSS property.

Let us clear it with the below example.

Example of !important in CSS

Example :

<html>
<head>
	<style>
		#specificity_id {
			color: green;
		}
		
		div {
  			color: red;
		}
		
		div.specificity_example {
  			color: blue !important;
  		}	
	</style>
</head>
<body>
	<div id="specificity_id" class="specificity_example"> Example of specificity </div>
</body>
</html>

Output :

So, if you look at the above example, the ID selector should be getting the highest priority.

#specificity_id {
	color: green;
}

And the color of the content of the <div> element should be green.

But if you look at the above output, the color of the content of the <div> element is blue.

That is because we have marked the class selector with !important rule.

div.specificity_example {
	color: blue !important;
}

❮❮ PREV NEXT ❯❯