Question 362004 in Html Question posted in
Some basic documentation can be found here.

Html – Remove border-left on the first list item

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Your CSS rule has a double colon it should be a single colon or use :first-of-type

    .banner-cards li:first-child{
    border-left: 0;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search