Remove last border-bottom?
30,517
Solution 1
You can also set the top border instead 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; }
Solution 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; }
Solution 3
you can use jquery too
$('ul li:last-child').css('border-bottom', 'none');
I prefer this way as it means less jumping around and crazy weird exceptions in your css.
Solution 4
Add a class to the li of last or if css3 is acceptable
ul.test>li:last-of-type { border-bottom:none }
Solution 5
Please add class to this :
li:last-child { border-bottom: none; }
Author by
user622378
Updated on July 05, 2022Comments
-
user622378 almost 2 years
I use li to show a list of records.
Each li has a bottom-border:1px solid black;
but I don't want to show 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 still showing bottom border.