CSS, Styling the Parent/Root but not the children? W/O creating sloppy CSS

Question

So this is new, I'm trying to create clean CSS, here's my code example:

<ul id="Main">
 <li>blah blah</li>
 <li>blah blah</li>
 <li>blah blah</li>
 <li>
   <ul>
      <li>ding dong</li>
      <li>ding dong</li>
      <li>ding dong</li>
   </ul>
 </li>
</ul>

Then I have the following CSS:

#Main li {
    background-color:Red;
}

Problem is I don't want the background-red in the DING DONG LI's is there a way in CSS to say not the root / children? Or do I need another ID/CLASS to cancel out the parent styling?

Thanks

Answer 1

.

#Main > li {
    background-color:Red;
}

a > b means that b is direct child of a

Answer 2

#Main li { background:red; }
#Main li li { background:transparent; }

One could use > but it doesn't work in IE6. One could add additional * styles for IE6 but the above is arguably more succinct.