title: How to select the first level of children (li) from ul
body: <p>Given the following structure, I want to select the first level of children (li) from the list (ul), but not the nested list. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul.list &gt; li {
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="list" class="list"&gt;
     &lt;li&gt;first level&lt;/li&gt;
     &lt;li&gt;first level&lt;/li&gt;
     &lt;li&gt;
        &lt;h1&gt;&lt;/h1&gt;       
        &lt;div&gt;
           &lt;ul&gt;
              &lt;li&gt;second level&lt;/li&gt;
              &lt;li&gt;second level&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/div&gt;
     &lt;/li&gt;
     &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><sup>(<a href="https://jsfiddle.net/ygoh1cee/1/" rel="nofollow">JSFiddle</a>)</sup></p>
  
  <p>But that selects also the items (li) inside the div.</p>
  
  <p>I want to select the first level of children (li) using only <strong>ONE</strong> <strong>css RULE</strong>. How?</p>