Come mostrare i primi N elementi di un blocco e nascondere gli altri in css?

Question

Sto cercando di nascondere i primi 3 elementi che hanno la classe .row all'interno del blocco .container.

Quello che sto facendo si nasconde tutta la .row prima, e poi sto cercando di visualizzare il primo 3 .row utilizzando .row:nth-child(-n+3)

jsfiddle qui: http://jsfiddle.net/z8fMr/1/

ho due problemi qui:

1. Riga 3 non viene visualizzato, sto utilizzando nth-child nel modo sbagliato?
2. C'è una pratica migliore di nascondere tutto e quindi creare una regola specifica per visualizzare i primi elementi che voglio? C'è un modo in css di visualizzare solo i primi 3 .row e quindi nascondere tutti gli altri .row?

Grazie.

Answer 1

1. Hai un .notarow come il primo figlio, in modo da avere per tenere conto di che nel vostro :nth-child() formula. A causa di ciò .notarow, il primo .row diventa il secondo posto assoluto bambino del genitore, in modo da avere a contare a partire dal secondo al quarto:

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

   Updated fiddle

2. Quello che stai facendo è bene .

Answer 2

Non hai nemmeno bisogno di selettori CSS3:

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

questo dovrebbe funzionare anche in IE7.
Updated fiddle

Answer 3

Inoltre, come la soluzione di Giovanni, qualcosa di simile potrebbe anche funzionare.

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