title: querySelectorAll returns me all elements that include the :not(class)
body: <p><strong>Note</strong>: I will only accept pure js answers, not jquery or any other js library.</p>
  <p>I have a onchange method attached to a selector</p>
  <pre><code>const filter = (element) =&gt; {
      const value = document.getElementById(element).value;
  
      elements = document.querySelectorAll(&quot;table:not(&quot;+value+&quot;)&quot;);
  
      console.log(value, elements, &quot;table:not(&quot;+value+&quot;)&quot;);
  }
  </code></pre>
  <p>We get the element's value which in this case could be of two options: <code>is-room-type-false</code> and <code>is-room-type-true</code>. These classes are attached to every single table on the page (there could be hundreds) When I run this and get the <code>console.log</code></p>
  <p>I see:</p>
  <pre><code>is-room-type-true // Selected value
  8200 tables, node list. // The list of elements that supposedly do not contain this class.
  </code></pre>
  <p>Inspecting the giant array is showing me:</p>
  <pre><code>0: table.is-room-type-false.venue-id-1
  1: table // Child should not be here
  2: table .... (repeats for children tables) // none of these should be here.
  x (some number later): table.is-room-type-true.venue-id-1 // Should not be here  ...
  </code></pre>
  <p>I wonder if its because of the second class attached to tables(?)</p>
  <p>The tables can have nested tables, so <strong>I need just the parent tables</strong> (if possible) to come back, not their children.</p>
  <p>Also as you can see from the sample output, my value is <code>is-room-type-true</code> but as we can see not only do I get children back, but also tables with the class in question when I specifically stated: tables <strong>WITH OUT</strong> this class.</p>
  <p>So the question is:</p>
  <ol>
  <li>Whats wrong with my JS function to return me every single table including ones with the class applied.</li>
  <li>How do query such that my node list only shows parent tables? (if possible)</li>
  </ol>
  <p>The idea is to then take these tables that do not have said class that was selected and then hide them:</p>
  <pre><code>    [].forEach.call(document.querySelectorAll(&quot;table:not(&quot;+value+&quot;)&quot;), function (el) {
          el.style.visibility = 'hidden';
      });
  </code></pre>
  <p>But if I add this code to the above function, ALL TABLES hide (which is wrong)</p>
  <p>Thoughts?</p>