CSS !important Rule

CSS!importantrule is used to add more priority to a property than normal. In this tutorial we will learn !important rule and how to use it in CSS. Following is syntax of important rule.

Syntax

selector {
   property: value !important; 
}

Table of Contents

What is CSS !important Rule?Specificity in CSSCSS !important Rule ExampleCSS !important and SpecificityOverride Inline StylesMultiple Important KeywordCustom Properties !importantShorthand Properties !important

What is CSS !important Rule?

• An exclamation mark (!) followed by the wordimportant(without space) tells the browser to prioritize that value for the property above all other declaration.
• The !important rule will be applied regardless of specificity of property. We will discuss specificity later in this tutorial.
• If multiple selectors use important keyword for a property, then the selector with high specificity will be considered to be applied.

Specificity in CSS

Specificityin CSS determines which styles are applied to an element when multiple rules could apply. For example, inline styles have highest priority, then id selector, then class selectors and then element selector.

/* Element selector Styles */
p {
  color: black;
}

/* Override the above style, Class have higher specificity */
p.special {
  color: blue;
}

/* Using !important to force an override */
p {
  color: red !important;
}

The above declaration make the text color of paragraph as red. The style of element selector is overridden by class selector, which then again overridden by important keyword.

• Keep in mind that while ‘!important’ can be handy in specific cases, it’s best to use it only when truly needed.
• Using ‘!important’ too frequently can make your code harder to manage and debug.
• It’s a good practice to rely on proper CSS specificity and structure to prevent the excessive use of ‘!important’.

CSS !important Rule Example

The following example demonstrates the use of ‘!important’ which we saw above.

Example

CSS !important and Specificity

According to CSSspecificityinline styles have highest priority, then id selector, then class selectors and then element selector. Which means the style written by element selectors can be override by class selectors, id selector and inline style respectively.

Following example uses multiple selectors to apply color property to a paragraph but the element selector property having important keyword is applied to paragraph.

Example

Override Inline Styles

Inline style have most priority over any selector in CSS. But important keyword can override inline CSS also. Lets see an example.

Example

Multiple Important Keyword

When we apply multiple important keyword for a property in CSS using multiple selectors, the property which is inside the selector with high specificity is applied. Lets look at an example for this.

Example

CSS !important for Custom Properties

When you add ‘!important’ to a custom property, it means that this value is really important. The ‘!important’ flag is not passed as part of the custom property value to thevar()function.

Example

CSS !important on Shorthand Properties

When you use ‘!important’ with a shorthand property, it also applies importance to all its individual properties. The following examples are identical.This example:

Example