Селектор javascript, который соответствует классу, за исключением других

Question

Я пытаюсь написать селектор для querySelector, который будет включать divs класса «foo», но не «foo bar». Я не использую jQuery в этом проекте.

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

Я пытался играть с :not(), но я не уверен в правильности синтаксиса, так как это не работает для меня

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

Может кто-нибудь помочь?

Answer 1

Это должно быть

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

Это позволит выбрать все div элементы, имеющие class.foo и не .foo с .bar

Demo (Проверьте консоль для вывода)

Answer 2

как о

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