'Cypress - How to select the sub menu from the menu with no class or id?

Below is the html that I am working on:
` 

<li xpath="1">
                <a href="#" onclick="clearNewTabInvoiceDetails()" class="fruit">Fruits<span class="menu-arrow"></span></a>
                <ul class="sub-menu">
                 <li>
                <a href="/apple/Index" onclick="clearNewTabInvoiceDetails()" class="apple">
                    Apples
                </a>
            </li>
            <li>
                <a href="/mango/Index" onclick="clearNewTabInvoiceDetails()" class="mango">
                    Mangoes
                </a>
            </li>
            <li>
                <a href="/banana/Index" onclick="clearNewTabInvoiceDetails()" class="banana">
                    Pineapples
                </a>
            </li>
            </li>

<li xpath="1">
                <a href="#" onclick="clearNewTabInvoiceDetails()" class="drink">Drinks<span class="menu-arrow"></span></a>
                <ul class="sub-menu">
                 <li>
                <a href="/coke/Index" onclick="clearNewTabInvoiceDetails()" class="coke">
                    Coke
                </a>
            </li>
            <li>
                <a href="/fanta/Index" onclick="clearNewTabInvoiceDetails()" class="fanta">
                    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

`

javascripthtmlcssdomcypress


Solution 1:[1]

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()" class="fruit">Fruits<span class="menu-arrow"></span></a>
  <ul class="sub-menu">
    <li>
      <a href="/apple/Index" onclick="clearNewTabInvoiceDetails()" class="apple">
                    Apples
                </a>
    </li>
    <li>
      <a href="/mango/Index" onclick="clearNewTabInvoiceDetails()" class="mango">
                    Mangoes
                </a>
    </li>
    <li>
      <a href="/banana/Index" onclick="clearNewTabInvoiceDetails()" class="banana">
                    Pineapples
                </a>
    </li>
  </ul>

  <li xpath="1">
    <a href="#" onclick="clearNewTabInvoiceDetails()" class="drink">Drinks<span class="menu-arrow"></span></a>
    <ul class="sub-menu">
      <li>
        <a href="/coke/Index" onclick="clearNewTabInvoiceDetails()" class="coke">
                    Coke
                </a>
      </li>
      <li>
        <a href="/fanta/Index" onclick="clearNewTabInvoiceDetails()" class="fanta">
                    Fanta
                </a>
      </li>
    </ul>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zach Jensz

Related Questions