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.

```
<div class="foo">include me</div>
<div class="foo">and me</div>
<div class="foo bar">not me</div>

```

I have tried playing with [:not()](https://drafts.csswg.org/selectors-4/#negation) but am unsure of the correct syntax as this doesn't work for me

```
document.querySelectorAll('div.foo|*:not(.bar)');

```

Can anyone help?