Given the following HTML:
var activeItem = document.querySelector('.active');
var nestedMenu = activeItem.querySelector('ul > li > ul');
ul > li > ul
From the MDN docs for
Returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
This does not say that the selector is applied starting at the designated not, only that the results of the selector are filtered to descendent of the designated node.
Ie. it returns the first node which is both in the set of nodes matched by the selector – globally – and is a descendant of
And the one node that gets
.actual applied meets both criteria.
There is no universal – across all browsers – CSS selector method that will operate relative to another node. For non-IE you can include
:scope in your CSS to operate relative to the designated elements. A universal solution would be to use an id selector. So you could add an id to your starting node (or use its existing id) and then include that id in the CSS selector.