JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="root">
    <li><a>link 1</a>
        <ul>
            <li>
                <a>link 2</a>
                <ul>
                    <li><a>link 3</a></li>
                    <li><a>link 4</a></li>
                    <li><a>link 5</a></li>
                </ul>
            </li>
            <li>
                <a>link 6</a>
                <ul>
                    <li><a>link 7</a></li>
                    <li><a>link 8</a></li>
                    <li><a>link 9</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <div>content 
            <ul>
                <li><a>link 10</a></li>
                <li><a>link 11</a></li>
                <li>            <ul>
                <li><a>link 10</a></li>
                <li><a>link 11</a></li>
                <li><a>link 12</a></li>
            </ul>
</li>
                <li><a>link 12</a></li>
            </ul>
        </div>
    </li>
    <li><a>link 13</a></li>
    <li><a>link 14</a></li>
    <li><a>link 15</a></li>
</ul>

CSS

li { margin-left:10px; }
div { border:1px solid silver; }

JavaScript

$('#root > li > a, #root ul:not(#root :not(ul,li) ul) > li > a').css('border', '2px solid green');