JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul>
    <li class="whatever">list element 1</li>
    <li>list element 2</li>
</ul>

<ul>
    <li>list element 1</li>
    <li class="whatever">not first-child no match</li>
</ul>

<ul>
    <li>Not matches</li>
    <li>Matched child under here:
        <ul>
            <li class="whatever">list element 1</li>
            <li>list element 2</li>
        </ul>
    </li>            
</ul>

CSS

body > ul { padding: 20px; }

JavaScript

$('ul:has( > li.whatever:first-child)').css('color', 'red')