What is the "important" statement for?


What is the !important statement in CSS?

body {
  font-size: 12.5px !important;
asked by anonymous 14.07.2014 / 15:03

2 answers


The !important statement is to force CSS to use the property described in this line.

CSS works by hierarchies, a cascade of rules that obey priorities. For example a property declared in an element directly in HTML takes precedence over a property defined in CSS. In cases of these, and in cases of ambiguity where two rules are equal or competing, using !important makes that rule where it is present pervalecer.

To be more specific here is a list of priorities, in ascending order (first is less important), of how CSS works. And again, !important is the exception that overcomes all cases:


Universal selectors , eg: *{ } Selector , eg: .minhaClasse{ }

14.07.2014 / 15:05

The purpose of !important is to override the Precedence Rules .

Example of operation:


<p id="a" class="azul">teste</p>


#a{ color: red;}
.azul{ color: blue !important;}

Without the !important it should be red, because ID is more specific than a class , due to the use of it, it is in blue.

You can learn more about specificity and Precedence rules by taking a look in this tutorial .

14.07.2014 / 15:10