Imagine a structure like this:

```html
<div id="boxes">
  <div id="firstdiv">...</div>
  <div class="important">...</div>
  <div id="lastdiv">
    <div id="subdiv">...</div>
    <div class="important">...</div>
  </div>
</div>

```

Now if I write:

```
document.querySelectorAll('#boxes > div:not([class])')

```

I will get `#firstdiv` and `#lastdiv`. Great.

But what if I want to do the same from the `#boxes` element?

```
const boxes = document.querySelector('#boxes')

// this is what I tried
boxes.querySelectorAll('> div:not([class])') // it doesn't work

// and if I type
boxes.querySelectorAll('div:not([class])')
// I get #firstdiv, #lastdiv BUT ALSO #subdiv which I don't want

```

How can I do that?