Remove last border-bottom?

Question

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.

Berman

You are not giving the last LI a class last – Sarthe

Answer 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;  }

Onomastics

Thank you, that does work but does that work? What is li + li? – Berman

@user, w3.org/TR/CSS2/selector.html E + F: Matches any F element immediately preceded by a sibling element E. In this case, it matches any li immediately preceded by an li. – Onomastics

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;  }

Bra

Answer 3

Add a class to the li of last or if css3 is acceptable

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

Halakah

Answer 4

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.

Rubstone

:last-child is a great option, as it selects the last element for each parent. Thanks! – Fargone

Answer 5

Please add class to this :

li:last-child { border-bottom: none; }

Benford

Answer 6

Using: :last-of-type with :not()

The:last-of-type selector allows you to target the last occurrence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent 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

Implement