Applying CSS styles to <li> in an ordered list without applying to a nested ol

I have a nested ordered list with this structure

<ol>
    <li>
        <span>A</span>
        <ol class="childol">
            <li>
                <span>A1</span>
            </li>
            <li>
                <span>A2</span>
            </li>
        </ol>
     </li>
</ol>

I'm trying to apply a style to the li, e.g. a background colour:

li:nth-child(1) { background-color: hsla(41, 100%, 93%, 1); }

and I get this:

I'm trying to get the "Introduction to Lists" highlighted on its own with 100% width. I've tried to exclu开发者_如何学Pythonde the child ol like this:

li:nth-child(1) :not(.olchild) { background-color: hsla(41, 100%, 93%, 1); }

but I just get this:

How do I do this?

jsfiddle: http://jsfiddle.net/koesbong/KRv4v/3/

ol li {background-color: red;}
ol li li {background-color: white;}

or

ol:not(.childol) > li {background-color: red;}
ol li {background-color: white;}

use this

ol li{
  background:yellow;  
}

 li ol li{
  background:green;
} 

Just use the child combinator (ol > li) instead of the descendant one (ol li).

The problem is the backgournd colour is applied to the whole of the first list item of your parent list. I'd applie a class to the parent list and style that:

<style>
   ol.parent>li{ background-color: hsla(41, 100%, 93%, 1); }
   li>ol, li>ol>li{background-color:#FFF;}
</style>

<ol class="parent">
    <li>
        <span>A</span>
        <ol>
            <li>
                <span>A1</span>
            </li>
            <li>
                <span>A2</span>
            </li>
        </ol>
     </li>
</ol>

Replacing White (#FFF) with your appropriate background colour