Как показать первые N элементов блока и скрыть остальные в css?

Я пытаюсь скрыть первые 3 элемента, имеющие класс .row внутри блока .container.

то, что я делаю, скрывает все .row сначала, а затем я пытаюсь отобразить первые 3 .row с помощью .row:nth-child(-n+3)

jsfiddle здесь:http://jsfiddle.net/z8fMr/1/

у меня есть две проблемы:

  1. строка 3 не отображается, я использую nth-child неправильно?
  2. есть ли лучше практика, чем скрывать все, а затем создавать конкретное правило для отображения n первых элементов, которые я хочу? Есть ли способ в css просто отобразить первые 3 .row и затем скрыть все остальные .row ?

спасибо.

33
css css-selectors css3 pseudo-class

3 ответов

  1. у вас .notarow как первый ребенок, поэтому вы должны учитывать, что в :nth-child() формула. Потому что .notarow, первый .row будет второй ребенок, отношение родителей, поэтому вы должны рассчитывать, начиная со второго по четвертый:

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

    обновленный скрипку

  2. то, что вы делаете, прекрасно.

53

вам даже не нужны селекторы CSS3:

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

Это должно работать даже в IE7.
обновленный скрипку

20

кроме того, как и решение Джованни, что-то вроде этого также может работать.

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