CODEWITHSUNDEEP
htmlcss
Hommer Smith
Hommer Smith

Reputation: 27852

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? ​

Upvotes: 14

Views: 34335

Answers (2)

Reggie Pinkham
Reggie Pinkham

Reputation: 12708

Use the CSS :not selector to apply styles only where required—rather than adding then removing them.

For example,

body {
  background: #acc;
}

li:not(:first-child) {
  border-top: 1px solid #fff;
}

li:not(:last-child) {
  border-bottom: 1px solid #000;
}
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>

Upvotes: 2

CKKiller
CKKiller

Reputation: 1422

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

Just like that.

Upvotes: 30

Related Questions