ブロックの最初のN要素を表示し、cssで他の要素を非表示にするにはどうすればよいですか？

Question

私はブロック.containerの中にクラス.rowを持つ最初の3つの要素を隠そうとしています。

私は何をやっていることはまず.row隠れている、そして私はここに.row:nth-child(-n+3)

jsfiddle使用して最初の3 .rowを表示しようとしています：http://jsfiddle.net/z8fMr/1/

を私はここで二つの問題があります。

1. 行3は表示されません。間違った方法でnth-childを使用していますか？
2. すべてを隠してから、必要なn個の最初の要素を表示する特定のルールを作成するよりも良い方法はありますか？最初の3つの.rowを表示し、次に他のすべてを隠す方法がCSSにありますか.row？

ありがとうございます。

Answer 1

1. あなたは最初の子として.notarowを持っているので、あなたの:nth-child()式で、そのために考慮しなければなりません。あなたは第二から第四に開始カウントする必要がありますのでそのため.notarowで、あなたの最初の.rowは、親の2番目の子、全体次のようになります。

   .row:nth-child(-n+4){ 
       display:block; 
   } 
   

   Updated fiddle

2. 何をやっている罰金です。

Answer 2

あなたも、CSS3セレクタを必要としない：

.row + .row + .row + .row { 
    display: none; 
} 

これでもIE7で動作するはずです。
Updated fiddle

Answer 3

また、Giovanniのソリューションと同様に、このようなことも可能です。

.container > .row:nth-child(3) ~ .row { 
    /* this rule targets the rows after the 3rd .row */ 
    display: none; 
}