Below is the html that I am working on:
`
<li xpath="1">
<a href="#" onclick="clearNewTabInvoiceDetails()" >Fruits<span ></span></a>
<ul >
<li>
<a href="/apple/Index" onclick="clearNewTabInvoiceDetails()" >
Apples
</a>
</li>
<li>
<a href="/mango/Index" onclick="clearNewTabInvoiceDetails()" >
Mangoes
</a>
</li>
<li>
<a href="/banana/Index" onclick="clearNewTabInvoiceDetails()" >
Pineapples
</a>
</li>
</li>
<li xpath="1">
<a href="#" onclick="clearNewTabInvoiceDetails()" >Drinks<span ></span></a>
<ul >
<li>
<a href="/coke/Index" onclick="clearNewTabInvoiceDetails()" >
Coke
</a>
</li>
<li>
<a href="/fanta/Index" onclick="clearNewTabInvoiceDetails()" >
Fanta
</a>
</li>
</ul>
There are two menus with the same sub menu class which is . I want to select only one sub menu from ul which is id="main-nav. I want only the sub menus of fruits. I tried #main-nav li::nth-child(1) but, it's not working. There are two () I want to mark all the sub-menus of the first Image of sub menu
Please click here for more detail
`
CodePudding user response:
You can use the adjacent sibling selector
in CSS to select an element of class sub-menu
immediately preceded by an element with class fruit
:
.fruit .sub-menu {
color: red;
}
<li xpath="1">
<a href="#" onclick="clearNewTabInvoiceDetails()" >Fruits<span ></span></a>
<ul >
<li>
<a href="/apple/Index" onclick="clearNewTabInvoiceDetails()" >
Apples
</a>
</li>
<li>
<a href="/mango/Index" onclick="clearNewTabInvoiceDetails()" >
Mangoes
</a>
</li>
<li>
<a href="/banana/Index" onclick="clearNewTabInvoiceDetails()" >
Pineapples
</a>
</li>
</ul>
<li xpath="1">
<a href="#" onclick="clearNewTabInvoiceDetails()" >Drinks<span ></span></a>
<ul >
<li>
<a href="/coke/Index" onclick="clearNewTabInvoiceDetails()" >
Coke
</a>
</li>
<li>
<a href="/fanta/Index" onclick="clearNewTabInvoiceDetails()" >
Fanta
</a>
</li>
</ul>