Nesting child selectors in CSS

Question

I have this HTML:

<div class="navbar">
    <ul>
        <li>Foo
            <ul>
                <li>Bar</li>
            </ul>
        </li>
    </ul>
</div>

I want to apply CSS only to item "Foo." I do not want to tag every top-level <li> with a special class. My limited knowledge tells me I should be able to do this:

.navbar > ul > li  {
    text-transform: uppercase;
}

But the style gets applied to "Bar" as well when I do it like this. I thought that '>' specifies only immediate children, does it not work the same way when it's nested? Is what I'm trying to do even possible?

Answer 1

I thought that '>' specifies only immediate children, does it not work the same way when it's nested?

It does work the same way. Since you're anchoring the ul directly to .navbar with .navbar > ul, your selector does apply to li elements directly that particular ul only.

The problem is not with the selector; it's the fact that text-transform, like most text properties, is inherited by default. So even though you're applying the style only to immediate li elements, the nested ones receive it by inheritance.

You will need to reverse this manually on the nested elements:

.navbar > ul > li li {
    text-transform: none;
}