JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a>
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

<div>
    <p>But it doesn't have to be at the document root. The following is embedded in another <code>div</code> within this <code>div</code> tag.</p>
    <div>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a>
              <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
              </ul>
            </li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>

CSS

div {
    border: 1px solid black;
}

div > div {
    margin: 2em;
}

JavaScript

jQuery.extend(jQuery.expr[':'], {
    topmost: function(e, index, match, array) {
        // Loop through matched element.
        for (var i = 0; i < array.length; i++) {
            // Check that `e` is not descendant of any
            // matched element.
            //
            //NOTE: false check is to skip already-
            // processed elements.
            if (array[i] !== false && $(e).parents().index(array[i]) >= 0) {
                return false;
            }
        }
        return true;
    }
});

// Test it.
$(document).ready(function() {
    $('ul:topmost > li > a').css({
        background: 'yellow'
    });
    
    // Alternatively, li:topmost
    //$('li:topmost > a').css({
    //    background: 'yellow'
    //});
});