Similar issue: using document.querySelectorAll('li') in the Chrome dev tools console for me returns:

NodeList(7) [li, li.error-not-purple, li, li, li.error-not-purple, li.error-not-purple, li]

...whereas in the video when Guil uses the same query he gets the intended HTML collection of:

[<li>grapes</li>, <li class="error-not-purple">oranges</li>, <li>amethyst</li>, <li>lavender</li>, <li class="error-not-purple">fire trucks</li>, <li class="error-not-purple">snow</li>, <li>plums</li>]

(FWIW, when using just document.querySelector('li'), my result matches up with Guil's, i.e. a single HTML element is returned.)

Edit: It seems like NodeList is presently the expected return type of querySelectorAll, so maybe this video is just outdated. Docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

The document.querySelectorAll function has always returned a NodeList, but the devtool output has been enhanced in the more recent browser versions to provide more information than just the HTML. In fact, if you look on the left side of the output, you should see a small triangle. Clicking that will expand the display to reveal even more info, which will include more triangles. Those will of course reveal even more. You can go down to whatever level of detail you need and/or traverse into child nodes.

The information previously reported by older versions can be seen in the "outerHTML" attributes of each list item.

same outcome for me. using chrome. output nodelist using selectorAll query only shows an array (nodelist) with three items: li.error-not-purple, li.error-not-purple, li.error-not-purple. the sublist only show items 0, 1, 2... and all are li.error-not-purple. Never are the actual values listed- oranges, fire trucks and snow. I know it would be difficult/impossible to update all the videos as JS updates are released. I've come to accept the fact that the concepts in the videos are whats important, and (disclaimer)... 'actual results may vary'.

The chrome is just updated i guess. It actually combines the css property with all the query Selector in there and make the pointer of the mouse to actually show the element specifically on the screen. The small square box at the end of each query makes it even.