Comment afficher les N premiers éléments d'un bloc et masquer les autres en CSS?

Question

J'essaie de cacher les 3 premiers éléments ayant la classe .row À l'intérieur du bloc .container.

Ce que je fais, c'est d'abord masquer tous les .row, Puis j'essaie d'afficher les 3 premiers .row En utilisant .row:nth-child(-n+3)

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

J'ai deux problèmes ici:

1. La ligne 3 ne s'affiche pas, est-ce que j'utilise nth-child dans le mauvais sens?
2. Existe-t-il une meilleure pratique que de tout cacher et de créer ensuite une règle spécifique pour afficher les n premiers éléments que je veux? Existe-t-il un moyen dans css d'afficher simplement les 3 premiers .row Puis de masquer tous les autres .row?

Merci.

Answer 1

1. Vous avez un .notarow Comme premier enfant, vous devez donc en tenir compte dans votre formule :nth-child(). À cause de cela .notarow, Votre premier .row Devient le deuxième enfant dans l'ensemble du parent, vous devez donc compter du deuxième au quatrième:

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

   violon mis à jour

2. Ce que tu fais est bien.

Answer 2

Vous n'avez même pas besoin de sélecteurs CSS3:

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

Cela devrait fonctionner même dans IE7.
violon mis à jour

Answer 3

Aussi, comme la solution de Giovanni, quelque chose comme ça pourrait aussi fonctionner.

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