title: Applying CSS styling to only the first <li> in the root of a nested list
body: <p>i want to apply the CSS only first li but <code>:first-child</code> apply to all first child of every ul</p>
  
  <p>here is my <a href="http://jsfiddle.net/jassi9911/w47LD/" rel="nofollow noreferrer">CODE</a></p>
  
  <pre class="lang-css prettyprint-override"><code>#menu-navigation li:first-child{
     color:red;
  }​
  </code></pre>
  
  <p>When applied to this HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="nav" id="menu-navigation"&gt;
      &lt;li&gt;Home&lt;/li&gt;
      &lt;li&gt;About Us
          &lt;ul&gt;
              &lt;li&gt;Our Team&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;​
  </code></pre>
  
  <p>...both "Home" and "Our Team" turn red.</p>