-1

I have a list of items which are rendering in my react component and I want to hide the 4th child of the list item. I have the below html code

    <div class="ExpandableContent-Content MyAccountTabList-ExpandableContentContent">
   <ul>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">Dashboard</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">Address Book</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Orders</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Downloadable Products</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Wishlist</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">Newsletter Subscription</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Recently Viewed Products</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Save For Later Products</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">My Gift Cards</button></li>
      <li class="MyAccountTabListItem"><button role="link" class="MyAccountTabListItem-Button">Logout</button></li>
   </ul>
</div>

I tried to hide the 4th child using the below sass

    .MyAccountTabList{
    &-ExpandableContentContent{
        ul{
            li.MyAccountTabListItem :nth-child(4){
                display: none !important;
            }
        }
    }
}

But its not working. How do I solve it?

michael
  • 11
  • 4

1 Answers1

1

Just Remove space between class and :

li.MyAccountTabListItem:nth-child(4){
   display: none !important;
}
Aman
  • 1,502
  • 1
  • 8
  • 13