I'm facing an issue with a list of items rendered in my react component where I need to hide the 4th child of the list item. Here is the relevant 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 attempted to hide the 4th child using the following sass code:
.MyAccountTabList{
&-ExpandableContentContent{
ul{
li.MyAccountTabListItem :nth-child(4){
display: none !important;
}
}
}
}
Unfortunately, this solution is not working for me. Any suggestions on how to resolve this issue?