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

Question

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

Lo que estoy haciendo está ocultando toda la .row primero, y luego estoy tratando de mostrar el primer 3 .row utilizando .row:nth-child(-n+3)

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

tengo dos problemas:

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

Gracias.

Answer 1

1. Usted tiene un .notarow como el primer hijo, así que hay que tener en cuenta que en la fórmula :nth-child(). Debido a que .notarow, su primera .row se convierte en la segunda posición del niño de los padres, por lo que tiene que contar a partir de la segunda a la cuarta:

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

   Updated fiddle

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

Answer 2

Usted ni siquiera necesita selectores CSS3:

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

Esto debería funcionar incluso en IE7.
Updated fiddle

Answer 3

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; 
}