title: Only select initiate childs of parent using css
body: <p>I think that is a very simple problem, but I don't seem to get it right.
  I want to style a list using css, but I ably want to effect the "top level &lt; li > elements.</p>
  
  <p><a href="http://jsfiddle.net/4PPqd/" rel="nofollow">See my problem live</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="test"&gt;
  &lt;li&gt;1&lt;/li&gt;
  &lt;li&gt;2
      &lt;ul&gt;
          &lt;li&gt;2.1 - should not be red&lt;/li&gt;
          &lt;li&gt;2.2 - should not be red&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;3&lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.test &gt; li {
       color: #f00;
  }
  </code></pre>
  
  <p>What am I doing wrong? Thanks a lot!</p>