title: A javascript selector that matches on class, excluding others
body: <p>I am trying to write a selector for querySelector that will include the divs of class "foo" but not "foo bar". I'm not using jQuery in this project.</p>
  
  <pre><code>&lt;div class="foo"&gt;include me&lt;/div&gt;
  &lt;div class="foo"&gt;and me&lt;/div&gt;
  &lt;div class="foo bar"&gt;not me&lt;/div&gt;
  </code></pre>
  
  <p>I have tried playing with <a href="https://drafts.csswg.org/selectors-4/#negation" rel="nofollow">:not()</a> but am unsure of the correct syntax as this doesn't work for me</p>
  
  <pre><code>document.querySelectorAll('div.foo|*:not(.bar)');
  </code></pre>
  
  <p>Can anyone help?</p>