Home > Net >  How to select the sub menu from the menu with no class or id?
How to select the sub menu from the menu with no class or id?

Time:04-06

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>

  • Related