I want to remove the border on the first list item, the border styling is good, just to remove the first one. I have tried using first-child selector but it’s not working, probably missing something.
.container {
width: 100%;
}
.banner-cards {
display: flex;
text-align: center;
border-top: 1px solid rgba(249,2,0,.5);
}
.banner-cards li {
padding: 3rem 1.5rem;
gap: .56rem;
display: flex;
flex-direction: column;
width: 33%;
border-left: 1px solid rgba(249,2,0,.5);
margin-right: 0;
padding: 3rem 1.5rem;
}
.banner-cards li:first-child{
border-left: 0;
}
.banner-cards li a {
font-size: 28px;
line-height: 2.25rem;
color: red;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .125em;
text-decoration: none;
}<div class="container">
<ul class="banner-cards">
<li class="menu-item" data-image="image-1">
<a href="#">Hotel</a>
</li>
<li class="menu-item" data-image="image-2">
<a href="#">Membership</a>
</li>
<li class="menu-item" data-image="image-3">
<a href="#">Meetings</a>
</li>
</ul>
</div>>Solution :
You can do this by CSS
.banner-cards li:first-child {
border-left: none;
}
If you remove the double (::), and use only one (:) it should work.