title: nth-child direct child on nested lists
body: <p>I can't find a solution for this problem represented on this <a href="http://jsfiddle.net/ctvzLovr/" rel="nofollow">fiddle</a>. 
  I have a list and inside that list I have another list with items. I want to select the second direct child of the first list but what happens is that the second element on the second list is selected too. How can I select only the direct 2nd child of the first list?</p>
  
  <pre><code>&lt;ul id="list-1"&gt;
      &lt;li&gt;Item 1
          &lt;ul id="list-2"&gt;
              &lt;li&gt;Item 1 Child 1&lt;/li&gt;
              &lt;li&gt;Item 1 Child 2 (I don't want this one to be red)&lt;/li&gt;
          &lt;/ul&gt; 
      &lt;/li&gt;
      &lt;li&gt;Item 2 (I only want this one to be red)&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'm currently trying to access it like this: <code>$("#list-1 li:nth-child(2)").css("color", "red");</code></p>