применение css только для родителей, но не для детей

У меня есть неупорядоченный список:

<div class="list">
<ul>
    <li>
        list1
        <ul>
            <li>Sub list1</li>
            <li>Sub list2</li>
            <li>Sub list3</li>
        </ul>
    </li>
    <li>
        list2
        <ul>
            <li>Sub list1</li>
            <li>Sub list2</li>
            <li>Sub list3</li>
        </ul>
    </li>
</ul>
</div>

Теперь я хочу применить CSS только для первого списка, но не его дочерние ul и li. Я попытался сделать следующее:

.list ul li{
background:#ccc;
}

... но цвет фона применяется ко всем спискам. Что нужно сделать, чтобы изменить CSS только родителя, но не детей.

Ответ 1

Используйте оператор прямого потомка > для этого:

.list > ul > li { ... }

Оператор > выбирает только элементы, которые являются прямыми дочерними элементами элемента (ов) перед ним.

Обратите внимание, однако, что-либо внутри этого элемента списка, конечно, будет иметь фон элемента списка, несмотря на то, что ему не присвоен какой-либо фоновый цвет.

Ответ 2

Вы можете использовать для этого оператор>, например:

.list > ul > li{
  background:#ccc; 
}

Ответ 3

Единственный способ сделать это:

.List > ul > li { background-color: #ccc; }

Если вы хотите применить только bgcolor к ul, просто выполните:

.List > ul { background-color: #ccc; }

Ответ 4

Кроме того, теперь вы можете сделать:

li:not(li li) { background: #ccc; }