queryselectorall selects also child classes

Question

Example -

<div class="main"></div>
<div class="main child"></div>

On chrome devtools document.querySelectorAll(".main") selects main & main child.

How can I select only main?

Answer 1

Use .main:not(.child) to select only those elements that have the main class but not the child class.

console.log(document.querySelectorAll('.main:not(.child)'))

<div class="main"></div>
<div class="main child"></div>

Read more about :not() on MDN