What is use important in css

What does !important mean in CSS?

What does !important mean in CSS? Is it available in CSS 2? CSS 3? Where is it supported? All modern browsers?

With the introduction of CSS layers in near future, this can become be used less if the code is organized properly.

5 Answers 5

It means, essentially, what it says; that ‘this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’

In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the !important ‘attribute’ (?) discards the normal concerns as regards the ‘later’ rule overriding the ‘earlier’ ones.

Also, ordinarily, a more specific rule will override a less-specific rule. So:

body div #elementID ul li a < /* css */ >

As the latter selector is more specific (and it doesn’t, normally, matter where the more-specific selector is found (in the head or the external stylesheet) it will still override the less-specific selector (in-line style attributes will always override the ‘more-‘, or the ‘less-‘, specific selector as it’s always more specific.

If, however, you add !important to the less-specific selector’s CSS declaration, it will have priority.

Using !important has its purposes (though I struggle to think of them), but it’s much like using a nuclear explosion to stop the foxes killing your chickens; yes, the foxes will be killed, but so will the chickens. And the neighbourhood.

It also makes debugging your CSS a nightmare (from personal, empirical, experience).

Источник

!important

A ! delimiter followed by the important keyword marks the declaration as important. The !important flag alters the rules selecting declarations inside the cascade. A declaration that is not important is called normal.

To mark a declaration important, add the important flag ( !important ) after the value in the declaration. While white space is allowed between the delimiter and the keyword, the flag is generally written as !important without any white space.

selector  property: value; /* normal declaration */ property: value !important; /* important declaration (preferred) */ property: value ! important; /* important declaration (not preferred) */ > 

The !important comes after the value of the property value pair declaration, preceded by at least one space. The important flag must be the last token in the declaration. In other words, there can be white space and comments between the flag and the declaration’s ending semicolon, but nothing else.

Impact on the cascade

When it comes to important declarations, the cascade origin and layer orders are reversed. Without the important flag, declarations in the author’s style sheets override declarations in a user’s style sheet, which override declarations in the user-agent’s default style sheet.

When a declaration is important, the order of precedence is reversed. Declarations marked as important in the user-agent style sheets override all important declarations in the user style sheets. Similarly, all important declarations in the user style sheets override all important declarations in the author’s style sheets. Finally, all important declarations take precedence over all animations.

Note: All important declarations take precedence over all animations. !important is not valid within @keyframes animation declarations.

Reversing the precedence order for important declarations ensures users with special needs, such as personalized color schemes or large fonts, can override author styles when needed by marking some declarations in their user’s style sheet as important. It also guarantees malicious extensions can’t override important user-agent styles, which might break functionality or negatively impact security.

Does anything have precedence over important declarations? Yes, transitions. CSS transitions are a way to control the speed at which the property changes from one value to another. While transitioning from one value to another, a property will not match a specific important declaration.

a  color: red !important; background-color: yellow; transition: all 2s linear; > a:hover  color: blue !important; background-color: orange !important; > 

In this example, the color and background-color properties will transition to the hovered state over two seconds. Even though default states are normal declarations and hover states are !important declarations, the transition does happen.

Cascade layers

Within each of the three origins for style sheets – author, user, and user-agent – normal declarations in unlayered styles override layered style declarations, with the last declared having precedence over the layers declared before it. Important declarations reverse the order of precedence: important declarations in the first layer take precedence over important declarations in the next layer, and so on. Also, all the important declarations have precedence over important declarations made outside any layer.

Inline styles

Inline styles are styles defined using the style attributes. They can also be normal or important. Inline normal styles take precedence over all normal declarations, no matter the origin. Inline important styles take precedence over all other important author styles, no matter the layer, but important styles from user’s or user-agent’s style sheets and transitions override them.

!important and specificity

While !important is not part of determining specificity, it is related. Important declarations override all other declarations from the same origin and cascade layer.

#myElement#myElement#myElement .myClass.myClass p:hover  color: blue; > p  color: red !important; > 

This example displays a case of over-specifying a selector. No matter how high the selector specificity matches a normal declaration, an important declaration from the same source and cascade layer will always have precedence. In this case, the paragraph will always be red.

When two important declarations from the same origin and layer apply to the same element, browsers select and use the declaration with the highest specificity.

#myElement p  color: green !important; > p  color: purple !important; > 

In this case, the selector specificity matters. Only if the selectors had the same specificity would source order matter.

Impact on shorthand properties

Declaring a shorthand property with !important sets all of sub-properties as important. The two following selector style blocks are equivalent:

p  background: blue !important; > p  background-image: none !important; background-position: 0 0 !important; background-size: auto auto !important; background-repeat: repeat !important; background-origin: padding-box !important; background-clip: border-box !important; background-attachment: scroll !important; background-color: blue !important; > 

This example shows one of the several reasons avoiding the important flag is generally recommended.

Impact on custom properties

When the !important flag is added to a custom property value declaration, it makes the value assignment important. The !important flag is then stripped from the custom property value. The !important flag is not passed as part of the custom property value to the var() function.

:root  --myColor: red !important; --myColor: blue; > p  color: var(--myColor); > blockquote  color: var(--myColor); color: purple; > 

p>This is a paragraphp> blockquote>This is a blockquoteblockquote> 

In this example, the paragraph will be red, not blue, as the custom property value assignment is important. The blockquote will be purple, because the purple normal declaration comes after the normal red declaration.

Best practices

Avoid using !important to override specificity. When intentionally creating important declarations for UI requirements, comment in your CSS code to explain to maintainers why they should not override that feature.

Even when working to override high-specificity styles not under your control, such as styles in a 3rd party plugin declared with an id selector, you don’t need to use !important . Consider instead importing the 3rd party stylesheet script into a named or anonymous layer as your first cascade layer, instead of using !important . As long as the external styles do not include important declarations, your styles will take precedence over the widget styles, no matter the specificity.

If you need to override an external stylesheet containing important declarations, create a cascade layer containing the needed overrides, and declare that layer first.

Accessibility

Important styles from a user stylesheet take precedence over the author style sheet’s important declarations, meaning adding an !important flag to a site’s styles will not prevent individual users with special requirements, such as large fonts, from being able to override your styles by adding important styles in their own user’s style sheet.

Browser compatibility

This feature is supported in all browsers.

Источник

CSS The !important Rule

The !important rule in CSS is used to add more importance to a property/value than normal.

In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

Let us look at an example:

Example

.myclass background-color: gray;
>

p background-color: red !important;
>

Example Explained

In the example above. all three paragraphs will get a red background color, even though the ID selector and the class selector have a higher specificity. The !important rule overrides the background-color property in both cases.

Important About !important

The only way to override an !important rule is to include another !important rule on a declaration with the same (or higher) specificity in the source code — and here the problem starts! This makes the CSS code confusing and the debugging will be hard, especially if you have a large style sheet!

Here we have created a simple example. It is not very clear, when you look at the CSS source code, which color is considered most important:

Example

#myid <
background-color: blue !important;
>

.myclass background-color: gray !important;
>

p background-color: red !important;
>

Tip: It is good to know about the !important rule. You might see it in some CSS source code. However, do not use it unless you absolutely have to.

Maybe One or Two Fair Uses of !important

One way to use !important is if you have to override a style that cannot be overridden in any other way. This could be if you are working on a Content Management System (CMS) and cannot edit the CSS code. Then you can set some custom styles to override some of the CMS styles.

Another way to use !important is: Assume you want a special look for all buttons on a page. Here, buttons are styled with a gray background color, white text, and some padding and border:

Example

The look of a button can sometimes change if we put it inside another element with higher specificity, and the properties get in conflict. Here is an example of this:

Example

.button <
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
>

#myDiv a color: red;
background-color: yellow;
>

To «force» all buttons to have the same look, no matter what, we can add the !important rule to the properties of the button, like this:

Example

.button <
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
>

#myDiv a color: red;
background-color: yellow;
>

Источник