Page 88 - CSS

The !important declaration

The !important declaration is used to override the usual specificity in a style sheet by giving a
higher priority to a rule. Its usage is: property : value !important;

#mydiv {
font-weight: bold !important; /* This property won't be overridden
by the rule below */
}

#outerdiv #mydiv {
font-weight: normal; /* #mydiv font-weight won't be set to normal
even if it has a higher specificity because
of the !important declaration above */
}

Avoiding the usage of !important is strongly recommended (unless absolutely necessary),
because it will disturb the natural flow of css rules which can bring uncertainty in your style sheet.
Also it is important to note that when multiple !important declarations are applied to the same rule
on a certain element, the one with the higher specificity will be the ona applied.

Here are some examples where using !important declaration can be justified:

• If your rules shouldn't be overridden by any inline style of the element which is written inside
style attribute of the html element.
• To give the user more control over the web accessibility, like increasing or decreasing size of
the font-size, by overriding the author style using !important.
• For testing and debugging using inspect element.

See also:

• W3C - 6 Assigning property values, Cascading, and Inheritance -- 6.4.2 !important
rules

Calculating Selector Specificity

Each individual CSS Selector has its own specificity value. Every selector in a sequence increases
the sequence's overall specificity. Selectors fall into one of three different specificity groups: A, B
and c. When multiple selector sequences select a given element, the browser uses the styles
applied by the sequence with the highest overall specificity.

Group Comprised of Examples

A id selectors #foo

class selectors .bar
B attribute selectors [title], [colspan="2"]
pseudo-classes :hover, :nth-child(2)

c type selectors div, li

https://riptutorial.com/ 66