title: count direct children in html list
body: <p>Here's how the HTML markup looks like</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;red&lt;/li&gt;
    &lt;li&gt;green&lt;/li&gt;
    &lt;li&gt;
    &lt;ul&gt;
         &lt;li&gt;banana&lt;/li&gt;
         &lt;li&gt;pineapple&lt;/li&gt;
         &lt;li&gt;peanut&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;blue&lt;/li&gt;
    &lt;li&gt;
    &lt;ul&gt;
         &lt;li&gt;sun&lt;/li&gt;
         &lt;li&gt;mars&lt;/li&gt;
         &lt;li&gt;earth&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;orange&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>how do I count direct children (<code>&lt;li&gt;</code>) in this list? (items containing red,green,blue,orange) ?</p>