CSS - target only one layer deep

Question

I'm working with Sharepoint at the moment and to say it's code structure/layout is a mess would be a huge understatement. It has a left navigation, and I want all items in there to be styled with a div around them (I'd target them individually, but Sharepoint has hundreds of widgets each with their own name class), for example:

<div id="leftNav">
    <div id="widget1">
        <div></div>
        <div></div>
    </div>
    <div id="widget2">
        <div></div>
        <div></div>
    </div>
</div>

I've tried #leftNav div { } but that targets the sub divs too (and the sub divs of those divs) - is there anyway to just target the 'widget' divs?

Thanks!

Answer 1

Use the direct child combinator, >:

#leftNav > div {
    /* ... */
}

Answer 2

You can use the child selector to target the direct child of the elements.

#leftNav > div