title: JS querySelector only first child without iterating children
body: <p>How can I select a first child of type X which is a direct descendant of the element using the elements <code>querySelector</code></p>
  
  <p>For example :</p>
  
  <pre><code>&lt;div id="target"&gt;
     &lt;span&gt;1&lt;/span&gt;
     &lt;span&gt;2&lt;/span&gt;
     &lt;span&gt;3&lt;/span&gt;
     &lt;div&gt;
        &lt;span&gt;4&lt;/span&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to select only first child SPANs of the target div using querySelector.</p>
  
  <pre><code>target.querySelector('span'); // This would return all spans in target
  </code></pre>
  
  <p>The other alternatives I know and wouldn't like to use :</p>
  
  <p>Using <code>CSS</code> :</p>
  
  <pre><code>#target &gt; span
  </code></pre>
  
  <p>Using <code>JS</code> :</p>
  
  <pre><code>[].filter.call(target.children, f=&gt;{ return f.tagName == 'SPAN' })
  </code></pre>
  
  <p>I would like to use querySelector anyway...</p>
  
  <p>is there a way to call querySelectorAll on a given element, to select only first child elements?</p>