JSFiddle - React, Tailwind, and code Playground

HTML

<h1>context-matching prefixes</h1>
<div>
    <ul id="root">
        <li><ul id="a">
            <li></li>
        </ul></li>
        <li></li>
        <li></li>
    </ul>
</div>

<ul id="report"></ul>

CSS

#root {
    display: none;
}

JavaScript

var context = document.getElementById("root"),
    suffix = "*:not(#a) > li",
    prefixes = [
        "",
        "*",
        "div",
        "ul",
        "#root",
        "[id='root']"
    ];

var report = {
    'jquery from container': context.querySelectorAll('* :not(#nested) > li').length,
    'QSA from container': $('#root')[0].querySelectorAll(':not(#nested) > li').length,
    'jquery from body': $('body').find(':not(#nested) > li').length,
    'QSA from body': $('body')[0].querySelectorAll(':not(#nested) > li').length
};

$.each( prefixes, function( i, prefix ) {
    var selector = prefix + ' ' + suffix;
    $('<li>').text(
        selector + ': ' +
        context.querySelectorAll( selector ).length
    ).appendTo('#report');
});