web-dev-qa-db-ja.com

cssでブロックの最初のN個の要素を表示し、他の要素を非表示にする方法は？

ブロック_.row_内にクラス_.container_を持つ最初の3つの要素を非表示にしようとしています。

私がやっていることは、最初にすべての_.row_を非表示にし、次に.row:nth-child(-n+3)を使用して最初の3つの_.row_を表示しようとしている

ここのjsfiddle： http://jsfiddle.net/z8fMr/1/

ここには2つの問題があります。

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

ありがとう。

csscss3pseudo-classcss-selectors
39
Vincent

  1. 最初の子として_.notarow_があるので、:nth-child()式でそれを考慮する必要があります。そのため、_.notarow_は、最初の_.row_が親全体の2番目の子になるため、2番目から4番目までカウントする必要があります。

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

    更新されたフィドル

  2. あなたがやっていることは大丈夫です。

62
BoltClock

CSS3セレクターも必要ありません。

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

これはIE7でも機能するはずです。
更新されたフィドル

20
Giovanni

また、ジョバンニのソリューションと同様に、このようなものも機能します。

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