sobre - ¿Cómo mostrar los primeros N elementos de un bloque y ocultar los otros en CSS?

tipos de display css

Question

Estoy tratando de ocultar los primeros 3 elementos que tienen la clase .row dentro del bloque .container .

Lo que estoy haciendo es ocultar todos los .row primero, y luego estoy tratando de mostrar los primeros 3 .row usando .row:nth-child(-n+3)

jsfiddle aquí: http://jsfiddle.net/z8fMr/1/

Tengo dos problemas aquí:

1. La fila 3 no se muestra, ¿estoy usando nth-child de la manera incorrecta?
2. ¿Existe una mejor práctica que ocultar todo y luego crear una regla específica para mostrar los primeros n elementos que quiero? ¿Hay alguna manera en css para simplemente mostrar los primeros 3 .row y luego ocultar todos los demás .row ?

Gracias.

Answer 1

1. Tiene un .notarow como primer hijo, por lo que debe contabilizarlo en su fórmula :nth-child() . Debido a eso .notarow , su primer .row convierte en el segundo hijo en general del padre, por lo que debe contar desde el segundo hasta el cuarto:

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

   Fiddle actualizado

2. Lo que estás haciendo está bien.

Answer 2

Además, al igual que la solución de Giovanni, algo como esto también podría funcionar.

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

Answer 3

Ni siquiera necesita selectores de CSS3:

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

Esto debería funcionar incluso en IE7.
Fiddle actualizado