How to remove the border-bottom? of the last li element

html structure:

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

css:

li{
  border-bottom:1px solid -sharpddd;
}

requirements: do not use the selector in css3, compatible with ie8.

Oct.06,2021

can I add class to li? If so, you can use a class fit! important attribute to modify.
li {
border-bottom:1px solid-sharpddd;
}
.lastLi {

border-bottom:none!important;

}


do not use css3, but also be compatible with ie8,. If the quantity is determined, add a class, to the last li and then set {border:0;}. If you are not sure, you can only use js to solve the problem. Jq is also relatively simple:

$('ul li:last').css('border','0');

change your way of thinking. Use the + neighbor selector. Compatible with IE7+ . Recommend an article: 30 CSS selectors you must remember

<style>
li + li{
    border-top: 1px solid -sharpddd;
}
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

to get to the point, it should be like this:

li{
  border-bottom:1px solid -sharpddd;
}
li:last-child{
  border-bottom:none;
}

however, according to the actual needs, the following approach is recommended:

li + li{
  border-top:1px solid -sharpddd;
}

li is a fixed number

li+li{
    border-top:1px solid -sharpddd;
}

if li is created dynamically

li{
    border-bottom:1px solid -sharpddd;
}
li+li:last-child{
    border-bottom:0;
}
Menu