Delete last boundary bottom?

Question

I use li to display a list of entries.

Each li has a lower border: 1px solid black,

but i don't want to show the border at the end of li?

Example:

.test li{ height:1%; overflow:hidden; padding:4px 0; margin:-1px 0 0; border-bottom: 1px solid black; } .test li.last { border-bottom: none; } <ul class="test"> <li> Foo 1 </li> <li> Foo 2 </li> <li> Foo 3 </li> </ul> 

Foo 3 is still showing the bottom border.

Answer 1

You can also set the upper bound and use the sibling selector to handle this without the need for an extra class:

 .test li{ height:1%; overflow:hidden; padding:4px 0; margin:-1px 0 0; } .test li + li { border-top: 1px solid black; } 

Answer 2

 .test li{ height:1%; overflow:hidden; padding:4px 0; margin:-1px 0 0; border-bottom: 1px solid black; } .test li:last-child { border-bottom: none; } 

Answer 3

Add class to li last or if css3 is acceptable

ul.test> li: last-of-type {no bottom border: no}

Answer 4

you can also use jquery

 $('ul li:last-child').css('border-bottom', 'none'); 

I prefer this method because it means less jumping around and crazy weird exceptions in your CSS.