Need explanation regarding CSS code

Question

I have the following piece of code in the CSS page of a site

left: 0 !important;

What does this !important mean exactly in this code?

I never seen this anywhere before.

Andrea Turri · Accepted Answer · 2012-09-20 08:59:23Z

CSS means that the styles are applied in order as they are read by the browser.

The first style is applied and then the second and so on.

What this means is that if a style appears at the top of a style sheet and then is changed lower down in the document, the second instance of that style will be the one applied, not the first.

For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:

p { color: #ff0000; }
 p { color: #000000; }

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied.

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

So if you wanted to make sure that a property always applied, you would add the !important property to the tag.

So, to make the paragraph text always red, in the above example, you would write:

p { color: #ff0000 !important; }
 p { color: #000000; }

Roman · Accepted Answer · 2012-09-20 08:58:00Z

2

Means, it overwrites all other declarations for the element. More about cascading order here http://www.w3.org/TR/CSS21/cascade.html#cascading-order

answered Sep 20, 2012 at 8:58

Roman

5044 silver badges10 bronze badges

Comments

Kyle · Accepted Answer · 2012-09-20 08:58:33Z

1

!important is an instruction used in CSS to override other styles that could be further down the cascade or in an inline style attribute on the element.

So for example:

.myDiv
{
    color: blue !important;
}


body .myDiv
{
    color: red;
}

The color would be blue because it was set to important, even though the other selector is more specific.

answered Sep 20, 2012 at 8:58

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

Comments

Horen · Accepted Answer · 2012-09-20 08:58:58Z

1

It means it overwrites any other css left attributes set to the same element or one of the parents

answered Sep 20, 2012 at 8:58

Horen

11.4k12 gold badges78 silver badges116 bronze badges

Comments

James South · Accepted Answer · 2012-09-20 08:59:08Z

1

From Microsoft

CSS attempts to create a "balance of power" between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet. However, for balance, an !important declaration takes precedence over a normal declaration. Both author and user style sheets may contain !important declarations, and user !important rules override author !important rules.

answered Sep 20, 2012 at 8:59

James South

10.7k4 gold badges66 silver badges122 bronze badges

Comments

Michael Schmidt · Accepted Answer · 2012-10-09 08:25:55Z

1

It means, that this statemant override all of the other code.

example:

div{
    left: 0px !important;
    } 
div {
    left: 100px;
    }

So the div is 0px left, because of the !important it ignore the left: 100px;

edited Oct 9, 2012 at 8:25

answered Sep 20, 2012 at 8:59

Michael Schmidt

9,26013 gold badges59 silver badges80 bronze badges

Collectives™ on Stack Overflow

Need explanation regarding CSS code

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related