JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>this is some paragraph 1</li>
    <li><p>this is some paragraph 2</p></li>
    <li><p>this is some paragraph 3</p></li>
    <li><p>this is some paragraph 4</p></li>
    <li><p>this is <span>some <a href="#">paragraph</a></span></p></li>
</ul>

JavaScript

console.log("Here is the case where things don't work properly (All tags without grandchildren)");
console.log($(":not(:has(:has(*)))"));
console.log("Here is the case where we are missing the right paren");
console.log($(":not(:has(:has(*))"));
console.log("Here is the functioning not have a child selector");
console.log($(":not(:has(*))"));
console.log("Here is the functioning has grandchildren selector");
console.log($(":has(:has(*))"));