Nested Sass to select and affect only the first level menu anchors not the sub-menus-CodePudding

Here I am trying to give the top level menu bar a different height than the sub-menu items.

Seems first-child affects all the menu items (menu & sub-menu items) though it should only affect the menu items, don't know exactly what is the cause, and how to solve it with a neat solution without using extra class selectors or adding an !important rule.

Please take a look at the code, full code is also provided.

HTML Code:

      <ul > 
        <li >
          
          <a href="#s1">Perfumes</a>
          
          <ul >
            <li><a href="#">Asia</a></li>
            <li><a href="#">Europe</a></li>
          </ul>
          
        </li>

        <li>
          
          <a href="#s2">Gemstones</a>
          
          <ul >
            <li><a href="#">Asia</a></li>
            <li><a href="#">Europe</a></li>
          </ul>
          
        </li>
     
      </ul>

Sass (SCSS) - Showing the focused parts:

In menu section I have:

.menu
  a {
    &:first-child {
      height: 80px; line-height: 80px; // It applies to all the menu
      and sub-menu items, we want it to just be applied to the top
      menu bar items!
    }
  }

In SubMenu I have:

.submenu {
  
  & > li {
    
    a {
      height: 50px;  line-height: 50px;  
      // height: 50px !important;  line-height: 50px !important;
      // This works, but don't want to use !important, want to find other
        workarounds and the issues here       
    }
  }

Note: I prefer not to use additional class selectors, just I like to use the advanced/nested Sass selectors.

Full Code: Code is here

CodePudding user response：

I don't know about sass but the css that you are generating is .menu > li a:first-child so, it will affect ALL first child in all submenus . You should generate .menu > li > a {}, this will affect just the 's inside first level (Perfumes and Gemstones):

.menu > li > a {
  height: 80px;
  line-height: 80px;
}

in this fiddle I used your html and your css (compiled). notice I commented the compiled css line 25 and added the line 30