JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="topnav">
    <li>stuff1
        <ul>
            <li class = "header">stuff1.1
                <ul>
                    <li class = "header">stuff1.1
                        <ul>
                            <li>stuff1.1.1</li>
                            <li>stuff1.1.2</li>
                            <li>stuff1.1.3</li>
                            <li>stuff1.1.4</li>
                        </ul>
                    </li> 
                    <li>stuff1.2</li>
                    <li>stuff1.1</li>
                    <li>stuff1.4</li>
                </ul>                    
            </li>
            <li class = "header">stuff1.2</li>
            <li class = "header">stuff1.3</li>
            <li class = "header">stuff1.4</li>
        </ul>
    </li>
    <li>stuff2</li>
    <li>stuff3</li>
    <li>stuff4</li>
</ul>

JavaScript

/*
PROBLEM
--------------------------------------
animate only the direct children of the li items with class = "header"
*/

$( "ul.topnav > li" ).css( "border", "3px double red" );