How to add style to parent <li> item if child <ul> exists?

Question

I'm trying to make a menu in advance to be seen whether there is a double nesting.

<ul class="parent">
 <li class="child"></li>
 <li class="child">
  <ul slass="nesting">
   <li></li>
   <li></li>
  </ul>
 </li>
<li class="child"></li>
</ul>

So ul class="nesting" hidden by default but appears during the hover of li class="child". I want to make another design on the li class="child" which have a nested ul. Another words how can i show nesting before hover by the means of Javascript/JQuery?

Thnaks in advance!

Answer 1

Use the jQuery :has() selector :

$("li.child:has(ul.nesting)").addClass("myclass");

In English:

If li.child has ul.nesting as a descendant (child), add class myclass to that li.child element.

Answer 2

A simple solution for this would be having something like:

 var $doubleNesting = $('li.child').find('ul');

And then add some css styling on the current li, or something like that.