CSS Specificity
Or: What the hell?! Why is that CSS selector overriding this one?
Josh and I were talking about it the other day and I’ve run into it before, too.
Example:
I’ve got a div with the id ‘sidebar’ and I want the background to be blue. I can’t change some CSS that’s being called in another file so I have to override it.
Existing CSS:
div#sidebar { background: red; }
New CSS:
#sidebar { background: blue; }
The background will be red even those the later style tells it to be blue. Specifying a specific element adds more “weight” to the importance and thus out weighs the other style.
The following articles sum it up best.
Pure numbers: http://www.w3.org/TR/CSS2/cascade.html#specificity
If you like poker: http://iamacamera.org/default.aspx?id=95
If you like Star Wars: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html (also http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg)