applying css for only parent but not to children

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.

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.

You can use the > operator for that, like this:

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

Alternatively, you can now do:

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

The only way of doing this is like:

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

If you want to apply only the bgcolor to the ul simply do:

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

:)