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

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

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

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

У меня здесь две проблемы:

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

Спасибо.

Ответы

Ответ 1

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

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

    Обновленная скрипка

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

Ответ 2

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

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

Это должно работать даже в IE7.
Обновлена ​​скрипка

Ответ 3

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

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