Using Queryselector To Find Descendant Elements Returns Unexpected Results

So I've been playing around with querySelector recently and noticed some really odd behaviour when trying to select descendant elements. Take the following markup as an example: &

Solution 1:

Per the docs, "Selectors are evaluated against a given element in the context of the entire DOM tree in which the element is located."

That is, it's not a jQuery-style "find an element matching the selector path starting here".

#parent #foo definitely matches div div and div > div, when viewed from the DOM tree level, per the spec.

It "works" when you change #parent to a span because #parent #foo no longer matches div div, and #foo #bar is the new first match.