CSS brainteaser: How do alter last class result in a list

Question

I am displaying search results in a div:

<div id="results">
  <div class="list-item">[Text]</div>
  <div class="list-item">[Text]</div>
  <div class="list-item">[Text]</div>
  <div class="list-item">[Text]</div>
  <div class="list-item">[Text]</div>
  <div class="list-item">[Text]</div>
</div>

The number of list-items is variable. I want to have border-bottom: 1px solid #000; on all the list-item classes, except for the last result. Is there a way in CSS to do this, or do I need to use JS?

Well, this isn't really a brainteaser... `:last-child` has been around for years. — Camilo Martin, Jul 21 '13 at 10:58

score 9 · Accepted Answer · answered Jul 21 '13 at 10:42

9

Use :not and :last-child:

.list-item:not(:last-child) {
  border-bottom:1px solid #000;
}

It works and its elegant: http://jsfiddle.net/3Znbu/

answered Jul 21 '13 at 10:42

Ivan Chernykh

41,617
13
134
146

Would give a fiddle link ;) http://jsfiddle.net/xD3dA/ – hjpotter92 Jul 21 '13 at 10:43
This is the good way. – pzin Jul 21 '13 at 11:05
@pzin yes , regards to CSS3 things becomes easier – Ivan Chernykh Jul 21 '13 at 11:07

Norbert · Answer 2 · 2013-07-21T10:54:33.043

6

Use the :last-child selector.

.list-item {
  border-bottom:1px solid #000;
}

.list-item:last-child {
  border-bottom: 0;
}

As Mooseman pointed out, it won't work on IE8 or less, so if you need IE8 support, I would suggest either a jQuery solution, or using the :first-child selector, which has IE7+ support.

jQuery

$('.list-item:not(:last-child)').css('border-bottom','1px solid #000');

:first-child

.list-item {
  border-top:1px solid #000;
}

.list-item:first-child {
  border-top: 0;
}

edited Jul 21 '13 at 10:54

answered Jul 21 '13 at 10:42

Norbert

2,741
8
56
111

Note that `:last-child` will not be recognized by IE8: http://caniuse.com/#feat=css-sel3 – Mooseman Jul 21 '13 at 10:43
+1 for `first-child`, but note, that for `:first-child` to work in <= IE8, you must have DOCTYPE specified. – tomsseisums Jul 21 '13 at 11:01
1

Frankly if you don't already have a DOCTYPE you shouldn't be trying to use such "advanced" CSS in the first place. – BoltClock Jul 21 '13 at 12:22

score 1 · Answer 3 · answered Jul 21 '13 at 10:42

1

#results .list-item:last-child {
   border-bottom: none;
}

answered Jul 21 '13 at 10:42

Nadh

6,987
2
21
21

CSS brainteaser: How do alter last class result in a list

3 Answers3