¿Cómo mostrar los primeros N elementos de un bloque y ocultar los demás en css?

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 manera incorrecta?
  2. ¿Hay una mejor práctica que ocultar todo y luego crear un regla para mostrar los n primeros elementos que quiero? ¿Hay alguna forma en css de mostrar los primeros 3 .row y luego ocultar todos los demás .row ?

Gracias.

Author: BoltClock, 2012-08-12
Source

3 answers

  1. Usted tiene un .notarow como el primer hijo, por lo que tiene que tener en cuenta que en su fórmula :nth-child(). Debido a eso .notarow, su primer .row se convierte en el segundo hijo en general del padre, por lo que tiene que contar a partir del segundo al cuarto: 

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

    Fiddle actualizado

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

 53
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-12 12:34:54

Ni siquiera necesitas selectores CSS3: 

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

Esto debería funcionar incluso en IE7.
Fiddle actualizado

 20
Author: Giovanni,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-13 17:28:54

También, como 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;
}
 3
Author: Nikhil Girraj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-21 13:34:22