title: Vanilla JS Selector for an element that has a child element with a certain attribute
body: <p>I am trying to build a tab system.  If I have the following HTML:</p>
  
  <pre><code>&lt;div class="wizard-tabs"&gt;
    &lt;ul&gt;
      &lt;li class="active"&gt;&lt;a href="#" data-formstep="step1"&gt;Step 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-formstep="step2"&gt;Step 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-formstep="step3"&gt;Step 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How do I get the list item that has an anchor with a data-formstep attribute equal to a certain value?  I am currently using this:</p>
  
  <pre><code>document.querySelector('.wizard-tabs &gt; ul &gt; li:has(a[data-formstep="'+newStep+'"])').classList.add("active")
  </code></pre>
  
  <p>But I am getting an error saying:</p>
  
  <pre><code>Failed to execute 'querySelector' on 'Document': '.wizard-tabs &gt; ul &gt; li:has(a[data-formstep="step1"])' is not a valid selector.
  </code></pre>
  
  <p>What am I doing wrong?</p>