html - applying css for only parent but not to children

Question

I have an unordered list like this:

<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>

I now want to apply CSS only for the first list but not its children ul and li. I've attempted the following:

.list ul li{
background:#ccc;
}

...but the background color is applied to all lists. What should be done to change the CSS of only parent but not the children.

Answer 1

Use the direct descendant operator > for that:

.list > ul > li { ... }

The > operator selects only elements that are direct children of the element(s) before it.

Note however, anything inside that list item will of course have the background of the list item despite not having any background color directly assigned to it.