css - CSS 頭の体操: 最後のクラスの結果をリストに変更する方法

Question

検索結果を 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>

リスト項目の数は可変です。border-bottom: 1px solid #000;最後の結果を除いて、すべてのリスト項目クラスを使いたいです。CSS でこれを行う方法はありますか、それとも JS を使用する必要がありますか?

Answer 1

とを使用:notし:last-childます。

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

それは機能し、エレガントです：http://jsfiddle.net/3Znbu/

Answer 2

:last-childセレクターを使用します。

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

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

Mooseman が指摘したように、IE8 以下では動作しないため、IE8 のサポートが必要な場合は、jQuery ソリューションを使用するか、:first-childIE7+ をサポートするセレクターを使用することをお勧めします。

jQuery

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

：第一子

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

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

Answer 3

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