Weird child selector behavior...

Question

Well, I finally decided to totally drop IE6. It's great. First big benefit which comes with this decision is child selectors. So I started to use them for my nested drop-down menus for the first time and expected it to be a breeze. But... here's the code:

<style>
body {
    color:#000;
}

ul.top > li {
    color:red;
}

<ul class="top">
    <li>top li</li>
    <li>
        <ul class="sub">
           <li>sub li</li>
        <li>sub li</li>
        </ul>
    </li>
</ul>

What I expected here, that only immediate children of .top unordered list are colored red and all the rest are black. Isn't it a logical thing to expect? But they all actually get red...

Answer 1

try

ul.top > li {
    color:red;
}

ul.sub > li {
    color:black;
}

??

Answer 2

Tim gave you the solution. The explanation for this behaviour is that though color: red; is only applied to the top-level lis, the color is inherited by their descendants. Check CSS Inheritance at Dorward Online for an in-depth explanation.

Answer 3

Unfortunately the child selector causing all the li to inherit the class. So you'll need to define another child ul.sub > li{

Answer 4

Well you see the red color is applied to both the first and the second element in the list .top, now the second element does not have any style information for color applied, so therefore it uses the style of the parent witch has the color red.