[ACCEPTED]-Remove last border-bottom?-css-selectors
.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; }
0
You can also set the top border instead 2 and use the sibling selector to handle this 1 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; }
Add a class to the li of last or if css3 1 is acceptable
ul.test>li:last-of-type { border-bottom:none }
you can use jquery too
$('ul li:last-child').css('border-bottom', 'none');
I prefer this way 2 as it means less jumping around and crazy 1 weird exceptions in your css.
Please add class to this :
li:last-child { border-bottom: none; }
0
Using: :last-of-type with :not()
The:last-of-type selector allows 6 you to target the last occurrence of an 5 element within its container. It is defined 4 in the CSS Selectors Level 3 spec as a “structural 3 pseudo-class”, meaning it is used to style 2 content based on its relationship with parent 1 and sibling content.
.test li{
height:1%;
overflow:hidden;
padding:4px 0;
margin:-1px 0 0;
}
.test li:not(:last-of-type) {
border-bottom: 1px solid black;
}<ul class="test">
<li> Foo 1 </li>
<li> Foo 2 </li>
<li> Foo 3 </li>
</ul>Article link: enter link description here
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.