Only select initiate childs of parent using css

Question

I think that is a very simple problem, but I don't seem to get it right. I want to style a list using css, but I ably want to effect the "top level < li > elements.

See my problem live

HTML

<ul class="test">
<li>1</li>
<li>2
    <ul>
        <li>2.1 - should not be red</li>
        <li>2.2 - should not be red</li>
    </ul>
</li>
<li>3</li>

CSS

.test > li {
     color: #f00;
}

What am I doing wrong? Thanks a lot!

Answer 1

Nothing's wrong. You didn't set the color of the other lis so it's inheriting from the parent.

DEMO

.test > li {
    color: #f00;
}
li {
    color: #0f0;
}