Can't figure out why CSS work like this

Question

How come the #r3 isn't pink? (see jsfiddle.net/aAqKf/):

<!DOCTYPE HTML>
<html>
<head>
<style>
#r1 { width: 100px; height: 100px; border: solid 1px red; }
#r2 { width: 50px; height: 50px; border: solid 1px green; }
#r3 { width: 25px; height: 25px; border: solid 1px blue; }

.pink div {
    background: pink;
}

.red div {
    background: red;
}
</style>
</head>
<body>

<div id="r1" class="red">
    <div id="r2" class="pink">
        <div id="r3"></div>
    </div>
</div>

</body>
</html>

I would expect the pink class to apply the pink background to the div children. It doesn't work like that. Why?

Though, it works if I change the CSS as follows (jsfiddle.net/aAqKf/1/):

<style>
#r1 { width: 100px; height: 100px; border: solid 1px red; }
#r2 { width: 50px; height: 50px; border: solid 1px green; }
#r3 { width: 25px; height: 25px; border: solid 1px blue; }

.red div {
    background: red;
}

.pink div {
    background: pink;
}
</style>

Please help me figure out how come it works that way. Also, please do not suggest that I use !important along with the background: pink declaration because it will work only until I change the HTML as follows:

<div id="r1" class="pink">
    <div id="r2" class="red">
        <div id="r3"></div>
    </div>
</div>

NB: I am more interested in figuring out why it works that way than finding out how to make it work my way.

http://stackoverflow.com/questions/4072365/css-understanding-the-selectors-priority-specificity/4072434#4072434 — realmfoo, Aug 31 '11 at 05:56

score 2 · Answer 1 · answered Aug 31 '11 at 05:56

2

Both rules .pink div and .red div are equally specific. The latter rule overrides the former.

You almost never have to use !important, by the way. Using the selector body .pink div, or div.pink div is enough to give the selector more weight.

answered Aug 31 '11 at 05:56

Kobi

135,331
41
252
292

score 1 · Answer 2 · answered Aug 31 '11 at 05:55

1

From this page

To make it easy, when two rules have the same weight, the last rule specified wins.

In your first fiddle, the red wins. In the second the pink wins.

answered Aug 31 '11 at 05:55

Ray Toal

86,166
18
182
232

score -1 · Answer 3 · answered Aug 31 '11 at 06:00

Because the properties of class inheritance differ from that of the actual element.

For example, if you changed

.pink div { background: pink; }

to:

#r2 div { background: pink; }

it would work as you intended it, because the nested block level elements inherit based on their closest parent.

Classes, on the other hand, have much looser inheritance and properties get overwritten based on the parents, unless specifically said otherwise using !important, when two selectors have the same weight.

To further demonstrate this point, changing .pink div to div.pink div would also demonstrate the correct effect because, again, CSS is referring to an element and not a class selector.

Can't figure out why CSS work like this

3 Answers3