Hommer Smith Hommer Smith - 1 month ago 8
CSS Question

Remove top border of first child and bottom border of last child in CSS

I have the following HTML:

<ul>
<li>FIRST</li>
<li>SECOND</li>
<li>THIRD</li>
<li>FOURTH</li>
<ul>


And the following CSS:

li
{
border-top:1px solid #FFF;
border-bottom: 1px solid #D0D0D0;
}​


How can I remove the top border for the first LI element, and the bottom border for the last LI element?

Answer
li:first-child {
  border-top: none;
}
li:last-child {
  border-bottom: none;
}

Just like that.

Comments