CODEWITHSUNDEEP
htmlcss
user2942566
user2942566

Reputation: 455

how to remove the border-right for a last child in css

I want to remove the border-right for the last child using css. I'm using the html below:

 <div class="dividers">
     <div class="clone_container">
       <img src="clone.png"/>
        <a class="button-link">Clone</a>
     </div> 
    <div class="delete">
       <img src="delete.png"/>
        <a class="button-link">Delete</a>
     </div>
   <div class="abort">
       <img src="abort.png"/>
        <a class="button-link">Abort</a>
     </div> 
  <div class="pause">
       <img src="pause.png"/>
        <a class="button-link">Pause</a>
     </div>
 </div>     //end of dividers div

and the css:

div.dividers a {
display: inline-block;
border-right: 1px solid #DCDCDC;
    border-radius: 4px;
   height: 22px;
}
div.dividers {
   margin-right: -3px;
   padding-right: 0px
   }

   div.dividers a:last-child { border-right: none;  }

when i do a { border-right: none; } like shown above, all the borders are removed. how can i fix this? anyone with any ideas??

The output i am looking for is: Clone | Delete | Abort | Pause

Upvotes: 2

Views: 13232

Answers (2)

Morpheus
Morpheus

Reputation: 9065

You need to target last div in .dividers div:

div.dividers div:last-child a { 
   border-right: none;  
}

Example

Upvotes: 3

Oriol
Oriol

Reputation: 288120

Try

div.dividers > div:last-child > a { border-right: none;  }

Your code div.dividers a:last-child means

  • Select all <a> such as
    • Are last child of its parent
    • Are descendants of a <div> with class dividers.

The code div.dividers > div:last-child > a { border-right: none; } means

  • Select all <a> such as
    • Are children of a div <div> which
      • Is the last child of its parent
      • Is a child of a <div> with class dividers.

Upvotes: 5

Related Questions