css - CSS3 最初の div のみのトリック

Question

たくさんの div を含むコンテナーがあります。最初のものを除いて、それらすべてに灰色の上枠が必要です。nth-child を試しましたが、コードに問題があるようです。

<div class="container">
  <div class="row"> Stuff </div>
  <div class="row"> Stuff </div>
  <div class="row"> Stuff </div>
  <div class="row"> Stuff </div>
</div>

.row{ border-top-width: 1px; border-top-style: solid; border-top-color: #ccc;}
.row:nth-child1{  border-top-width: 1px; border-top-style: solid; border-top-color: #FFF;}

Answer 1

.row { border-top: 1px solid #ccc;}
.row:first-child {  border-top-color: #FFF;}

jsFiddle: http://jsfiddle.net/MSDYY/

もう1つは、背景が赤に設定されており、最初の要素の上に実際に白い上部境界線があることを示しています: http://jsfiddle.net/MSDYY/1/

使用する場合は、次nth-childのようになります。.row:nth-child(1)

Answer 2

次のいずれかを使用します。

.row:nth-child(1)

また

.row:first-of-type

また

.row:first-child

上の 2 つは IE9+ ですが、最後の 2 つは IE8 でも動作します。