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

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?

Answer 1

Use :not and :last-child:

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

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