I am struggling to add the class "bold" to a child element (span) of a parent element (button.usa-nav-link). This parent element has a sibling (ul li.active) with the class .active. When the sibling is active, I want the child element's text to be bold.
However, I am having difficulty targeting the parent element to access the child (span) element. I have tried using :has( > .active) and other methods without success. Any suggestions?
if(jQuery("button.usa-nav-link").siblings("ul").find(".active")){
jQuery(this).children("span").addClass("bold");
};.bold{
font-weight:bold;
font-size:22px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><button aria-controls="submenu-771" aria-expanded="false" class="usa-accordion-button usa-nav-link"><span>Products</span></button>
<ul aria-hidden="true" class="usa-nav-submenu" id="submenu-771">
<li class="expanded menu-mlid-771">
<a href="/dev/products">Products</a>
</li>
<li class="first leaf menu-mlid-776">
<a href="/dev/content/imagery">Imagery</a>
</li>
<li class="last leaf menu-mlid-775">
<a href="/dev/content/web-data-services">Web Data Services</a>
</li>
</ul>
</li>
<li><button aria-controls="submenu-773" aria-expanded="false" class="usa-accordion-button usa-nav-link"><span>Services</span></button>
<ul aria-hidden="true" class="usa-nav-submenu" id="submenu-773">
<li class="expanded active-trail active menu-mlid-773">
<a class="active-trail active" href="/dev/page/services">Services</a>
</li>
<li class="first leaf active-trail active menu-mlid-956">
<a class="active-trail active" href="/dev/page/services#fireprogramsandtechnicalsupport">Fire Programs and Technical Support</a>
</li>
<li class="leaf active menu-mlid-953">
<a class="active" href="/dev/page/services#inventoryandmonitoring">Inventory and Monitoring</a>
</li>
<li class="leaf active menu-mlid-777">
<a class="active" href="/dev/page/services#mapanddatadevelopment">Map and Data Development</a>
</li>
<li class="last leaf active menu-mlid-955">
<a class="active" href="/dev/page/services#scienceandtechnologyevaluation">Science and Technology Evaluation</a>
</li>
</ul>
</li>