!important - what does it do?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

!important - what does it do?

Post by Luke »

I am trying to understand what !important does in CSS, and I found this page:
http://www.w3.org/TR/REC-CSS2/cascade.html#cascade

But I still am not quite getting it... what does it to?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

If I understand it correctly under normal circumstances the precedence of styles is "author" (page style) > "user" (personal style) > "default" (browser's style), but with !important added the precendence is "user" > "author" > "default".
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

W3C Manual on CSS2 wrote:Style sheets may have three different origins: author, user, and user agent.
  • Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
  • User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behave as if it did).
  • User agent: Conforming user agents must apply a default style sheet (or behave as if they did) prior to all other style sheets for a document. A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See "A sample style sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0 documents.
Note that the default style sheet may change if system settings are modified by the user (e.g., system colors). However, due to limitations in a user agent's internal implementation, it may be impossible to change the values in the default style sheet.

Style sheets from these three origins will overlap in scope, and they interact according to the cascade.

The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.

By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All rules user and author rules have more weight than rules in the UA's default style sheet.
I think Feyd hit it on the head.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

It's often usefull in situations when you are confused about why a change to a certain element's style:

Code: Select all

p.someclass { color:red; }
doesn't result in that piece of HTML getting red.

Then you'll just throw in some !importants and voila! your element is rendered red.

So this saves you from having to understand the CSS cascade and the weight all the rules get. In this example, you should have seen this rule somewere else in your stylesheet:

Code: Select all

#div p { color:blue; }
And you should have known that #div p gets a higher weight then .someclass, and that that was the reason your p element stayed blue...

So to be honest: in this example you shouldn't have to use !important at all. I was a bit sarcastic. I'm just giving this example because the !important rule is sometimes abused.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Wow... I learn something new every day :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

d11wtq wrote:Wow... I learn something new every day :)
:D This place is awesome, huh?
Post Reply