title: CSS pseudo-selector to select the current element within querySelector?
body: <p>What's the CSS pseudo-selector to select an element's self?</p>
  
  <p>For example, this does not work:</p>
  
  <pre><code>Array.prototype.map.call(document.querySelectorAll('.program_record_outer'), programBox =&gt; {
      return programBox.querySelector('&gt; div')
  });
  </code></pre>
  
  <blockquote>
    <p>DOMException: Failed to execute 'querySelector' on 'Element': '> div' is not a valid selector.</p>
  </blockquote>
  
  <p>But I believe something like this would:</p>
  
  <pre><code>Array.prototype.map.call(document.querySelectorAll('.program_record_outer'), programBox =&gt; {
      return programBox.querySelector(':self &gt; div')
  });
  </code></pre>
  
  <p>However, <code>:self</code> isn't a thing, and <code>:root</code> refers to the document root, so how do I refer to the current context?</p>