title: CSS Select Non Recursive li's Only
body: <p>How can I style only the top level li's from this example list?</p>
  
  <pre><code>&lt;ul class='upper'&gt;
    &lt;li class="first"&gt;dog&lt;/li&gt;
     &lt;li&gt;cat&lt;/li&gt;
     &lt;li&gt;bird&lt;/li&gt;
     &lt;li&gt;mouse&lt;/li&gt;
     &lt;li&gt;
       &lt;ul class="lower"&gt;
          &lt;li&gt;chow&lt;/li&gt;
          &lt;li&gt;nibz&lt;/li&gt;
          &lt;li&gt;seed&lt;/li&gt;
          &lt;li&gt;cheese&lt;/li&gt;
       &lt;/ul&gt;
    &lt;/li&gt;
  
  
  ul.upper &gt; li {
    color:red;
  } 
  </code></pre>
  
  <p>This styles all li's which I understand because the recursive UL is inside a first level list item. Is there a simple way to style only the top level li's though? Maybe using ":not" in some way?</p>
  
  <p>Edit: I realize you can overwrite the style below it using color:initial or by adding another color(and other ways) but I was wondering if there was a way to ONLY select the top level li's nicely so another style isn't needed. </p>