CSS specificity / priority based on order in style sheet?

Question

I had a brief look at the CSS3 Selectors spec but couldn't find anything how to get round this problem. Additionally, I wasn't expecting the result from this to change when you move the CSS declarations around but it does. Any help would be great.

div.green_colour div.has_colour{ background-color: green; } div.red_colour div.has_colour{ background-color: red; }

<div class="red_colour"> <div class="green_colour"> <div class="has_colour"> I would like this to be green </div> </div> </div> <div class="green_colour"> <div class="red_colour"> <div class="has_colour"> I would like this to be red </div> </div> </div>

Just for reference, that’s the CSS3 Selectors spec. CSS3 is modular, so there are like 51 specs — see w3.org/Style/CSS/current-work. Like HTML5, It’s Not One Big Thing. — Paul D. Waite
– Paul D. Waite, Commented Sep 12, 2011 at 9:22
And I think issues relating to styles having different effects when moved around might be covered in the “CSS Cascading and Inheritance” spec. — Paul D. Waite
– Paul D. Waite, Commented Sep 12, 2011 at 9:23

Bassem · Accepted Answer · 2011-09-12 02:04:03Z

5

You can use the E > F child selector as a solution to your problem as such:

div.green_colour > div.has_colour{ background-color: green; } div.red_colour > div.has_colour{ background-color: red; }

According to this chart http://www.quirksmode.org/css/contents.html it is compatible with all major browsers and IE 7+

There are other ways to implement the solution above (e.g. via javascript) if you are interested.

-- Edit:

I'm not 100% sure if the reason for your solution not to work is due to the fact that browsers parse CSS from right to left instead of left to right, but I assume it has something to do with it. Someone please correct me if I'm wrong.

edited Sep 12, 2011 at 2:04

answered Sep 12, 2011 at 1:58

Bassem

3,1752 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AJP Over a year ago

'Link-' that's brilliant. Thanks so much. No actually I was trying to avoid the javascript and will now be able to chop out a whole load more. Thanks so much. And thanks for the QuirksMode link too. Here's the w3 spec on child-combinators though it doesn't talk about this enforcing a priority.

Ben Over a year ago

It has to do with the red rule being declared after the green rule. both has_colour elements match this rule but since the red one is the last, this one is applied. This is also why you import a reset.css file first and not last in the HTML head.

Bassem Over a year ago

@Benjamin agree, however the has_colour is declared with an ancestor div.green_colour as a descendant combinator relationship shouldn't the browser check for the whole rule and not just a part of it? Hence my theory of right to left parsing.

AJP Over a year ago

Yeah I didn't know about the '>' or that the order or CSS declarations was important. Now I do. Actually, my actual problem (not the one stated above) had a slight twist in that I have the has_color div nested inside another so my final css is div.green_colour > div > div.has_colour

BoltClock Over a year ago

As Benjamin says, it has nothing to do with right-to-left parsing; it has to do with the order of declaration of equally-specific rules. Also, combinators do not play a part in specificity.

Collectives™ on Stack Overflow

CSS specificity / priority based on order in style sheet?

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related