!important

Summary of characteristics of the `!important` value

Quick description

Makes a rule priority over all others.

Status

Standard

W3C Module

CSS Cascading and Inheritance

References (W3C)

🡇

🡅

CSS Cascading and Inheritance Level 6

Document status: WD (Working Draft)

CSS Cascading and Inheritance Level 5

Document status: CR (Candidate Recommendation)

CSS Cascading and Inheritance Level 4

Document status: CR (Candidate Recommendation)

CSS Cascading and Inheritance Level 3

Document status: REC (Recommendation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Document status: REC (Recommendation)

Cascading Style Sheets specification - Version 1

Document status: DEPR (Old specification, declared obsolete or superseded)

The !important value.

!important is used to make a rule absolutely priority over all others. You can read the tutorial on Priorities.

Example of syntax to force the character size to 12 pixels, whatever the values possibly defined by other rules:


	div {
	   font-weight: bold;
	   font-size: 12px !important;
	}

The !important value should be used with caution and as rarely as possible. Indeed, it contravenes the inheritance and priority mechanisms of CSS which are most often very practical: The more precise selector takes priority over less precise selectors. For example, ID-based selectors take precedence over class-based selectors, because an ID can only designate a single element on the page, while a class can designate several. The selector with ID is therefore more precise; it will have priority.

To override a rule already noted !important it is possible to repeat this value in the new rule. Which leads to a multiplication of rules denoted !important and makes the operation of the style sheet confusing.

How to avoid using `!important`?

Combine selectors to increase their priority.

Suppose we have a rule that defines the character size for element with id="edito". How can we force this rule in an exceptional way on one of the pages of our site? And without using the !important value.


	#edito {
	   font-family: 'Arial', sans-serif;
	   font-size: 12px;
	}

The solution is to use a more precise selector, which can be done by combining several selectors:


	div#edito {
	   font-size: 14px;
	}

	/* Ou même, si c'est nécessaire : /*

	body div#edito {
	   font-size: 14px;
	}

Using Cascade Layers.

This solution, recently standardized, is the best because it offers all the necessary flexibility. Cascade layers are defined with the @layer directive. On the same page, you can also consult a tutorial on cascading layers.

`!important` value and animations.

The !important value blocks animations that could be set to the same property.
Furthermore, it is not allowed to use the !important value in the definition of an animation.

For more information on animations, see the animation property page and the @keyframes directive page.


	@keyframes exemple {
	   from { width: 100px; }
	   to   { width: 200px; }
	}
	#id {
	   width:200px !important;
	   animation:exemple 2s infinite;
	}

The animation is not performed because it would conflict with the !important clause specified for the element width.


	@keyframes exemple {
	   from { width: 100px; }
	   50%  { width: 300px !important; } 
	   to   { width: 200px; }
	}
	#id {
	   animation:exemple 2s infinite;
	}

In this second example, the animation is processed, but without going through the 50% (300 pixels) step: this step has been ignored because of the !important value which is incorrect there.

History of the `!important` value.

The definition of !important has not evolved since its creation, when the language was first specified.

Cascading Style Sheets specification - Version 1

First specification of the CSS language. The !important value is already described.

November 17, 1995
Working Draft.
November 12, 1996
Proposed for recommendation.
December 17, 1996
Recommendation .
September 13, 2018
Old specification, declared obsolete.
Cascading Style Sheets Level 2 - Revision 1 Specification

No modification regarding this annotation.

November 04, 1997
Working Draft.
March 24, 1998
Proposed for recommendation.
May 11, 1998
Recommendation .
CSS Cascading and Inheritance Level 3

The specification provides clarification: rules declared with !important take priority over animations.

July 13, 2001
Working Draft.
October 03, 2013
Candidate Recommendation.
December 22, 2020
Proposed for recommendation.
February 11, 2021
Recommendation .
CSS Cascading and Inheritance Level 4

No change regarding the !important annotation.

April 21, 2015
Working Draft.
January 14, 2016
Candidate Recommendation.
CSS Cascading and Inheritance Level 5

No change regarding the !important annotation.

January 19, 2021
Working Draft.
January 13, 2022
Candidate Recommendation.
CSS Cascading and Inheritance Level 6

No change regarding the !important annotation.

December 21, 2021
Working Draft.

Voir aussi.

The CSS specifications published by the W3C are organized into modules. The !important value is part of the CSS Cascading and Inheritance module. The following definitions are also described in this same module.