title: applying css for only parent but not to children
body: <p>I have an unordered list like this:</p>
  
  <pre><code>&lt;div class="list"&gt;
  &lt;ul&gt;
      &lt;li&gt;
          list1
          &lt;ul&gt;
              &lt;li&gt;Sub list1&lt;/li&gt;
              &lt;li&gt;Sub list2&lt;/li&gt;
              &lt;li&gt;Sub list3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          list2
          &lt;ul&gt;
              &lt;li&gt;Sub list1&lt;/li&gt;
              &lt;li&gt;Sub list2&lt;/li&gt;
              &lt;li&gt;Sub list3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I now want to apply CSS only for the first list but not its children <code>ul</code> and <code>li</code>. I've attempted the following:</p>
  
  <pre><code>.list ul li{
  background:#ccc;
  }
  </code></pre>
  
  <p>...but the background color is applied to all lists. What should be done to change the CSS of only parent but not the children.</p>