title: Child selector using `querySelectorAll` on a DOM collection
body: <p>Let's presume you got a list with nested child lists.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;/li&gt;
              &lt;li&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And use <code>document.querySelectorAll()</code> to make a selection:</p>
  
  <pre><code>var ul = document.querySelectorAll("ul");
  </code></pre>
  
  <p>How can i use the <code>ul</code> collection to get the direct child elements?</p>
  
  <pre><code>ul.querySelectorAll("&gt; li"); 
  // Gives 'Error: An invalid or illegal string was specified'
  </code></pre>
  
  <p>Let's presume <code>ul</code> is cached somehow (otherwise i could have done <code>ul &gt; li</code> directly).</p>
  
  <p>In jQuery this works:</p>
  
  <pre><code>$("ul").find("&gt; li");
  </code></pre>
  
  <p>But it doesn't in native <code>querySelectorAll</code>. Any solutions?</p>