CSS - нацелен только на один слой

В настоящий момент я работаю с Sharepoint и говорю, что структура кода/макет - это беспорядок, это было бы огромным преуменьшением. Он имеет левую навигацию, и я хочу, чтобы все элементы там были созданы с помощью div вокруг них (я бы настраивал их индивидуально, но у Sharepoint есть сотни виджетов с собственным классом имен), например:

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

Я пробовал #leftNav div { }, но он также нацелен на sub divs (и sub divs этих div) - есть ли вообще цель для "div widget"?

Спасибо!

Ответ 1

Используйте прямой дочерний комбинатор, >:

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

Ответ 2

Вы можете использовать дочерний селектор для нацеливания прямого дочернего элемента.

#leftNav > div