I have come across a list fragment that is generated automatically and I only have the ability to adjust the CSS for it.
<ul class="menu">
<li class=" menuItem1 first parent"></li>
<li class=" menuItem2 parent"></li>
<li class=" menuItem3 parent"></li>
<li class=" menuItem4 parent selected">
<ul class="nccUlMenuSub1">
<li class=" menuItem1 first parent"></li>
<li class=" menuItem2"></li>
<li class=" menuItem3 selected parent">
<ul class="nccUlMenuSub2">
<li class=" menuItem1 first"></li>
<li class=" menuItem2"></li>
<li class=" menuItem3"></li>
<li class="menuItem4 last"></li>
<!-- Although this structure continues, I prefer not to display it-->
</ul>
... and so on
My goal is to utilize a CSS rule of display: none to hide everything except the specific part of the list shown in the above snippet:
<li class=" menuItem3 selected parent">
<ul class="nccUlMenuSub2">
<li class=" menuItem1 first"></li>
<li class=" menuItem2"></li>
<li class=" menuItem3"></li>
<li class="menuItem4 last"></li>
<!-- Although this structure continues, I prefer not to display it-->
</ul>
Currently, the CSS code I've developed only hides all content after the first line in my second example.
.menu .selected ul.nccUlMenuSub1 li[class*="menuItem"]:not(.selected) {
display: none;
}
How can I adapt my CSS to include both the selected element and two levels of its children (specifically .nccUlMenuSub2, along with their immediate <li> elements)?