Comment faire pour afficher les N premiers éléments d'un bloc et de masquer les autres dans le css?

Je suis en train d'essayer de cacher les 3 premiers éléments ayant la classe .row à l'intérieur du bloc .container.

Ce que je suis en train de faire est de cacher tous les .row d'abord, et ensuite 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. De la ligne 3 ne s'affiche pas, suis-je à l'aide de nth-child dans le mauvais sens?
  2. Est-il préférable de cacher le tout et ensuite, la création d'une règle spécifique pour afficher les n premiers éléments que je veux? Est-il un moyen en css pour afficher uniquement les 3 premiers .row et puis masquer tous les autres .row ?

Grâce.

  • Je viens de le faire avec JS.
InformationsquelleAutor Vincent | 2012-08-12
  1. 59

    1. Vous avez un .notarow que le premier enfant, de sorte que vous devez tenir compte de cela dans votre :nth-child() formule. En raison de cette .notarow, votre premier .row devient le deuxième enfant ensemble, du parent, de sorte que vous devez compter à partir de la deuxième à la quatrième:

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

      Mis à jour le violon

    2. Ce que vous faites est bien.

    • Merci pour votre explication claire BoltClock. J'ai pensé (-n+3) sélectionnez les 3 premiers .ligne quel que soit l'élément, il est avant.
    • Avez-vous aussi de savoir si il est aussi une bonne pratique pour ce que je veux faire? Cacher le tout puis en montrant les 3 premiers éléments => est-il un meilleur moyen d'afficher les N premiers éléments uniquement en css? merci
    • Il ne semble pas y avoir une meilleure façon. À l'aide de :nth-child() comme c'est très bien aussi longtemps que vous tenir compte de la structure réelle et il est assez prévisible.
    • Quel est le signe moins (-) ici?
    • Il retourne à la n de sorte qu'il compte à rebours à partir de 0, de sorte que vous obtenez 0+4, -1+4, -2+4, -3+4... résultant dans le 4e, 3e, 2e et 1er enfants.
    • pour le génie hack! 🙂

    InformationsquelleAutor BoltClock
  2. 20

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

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

    Cela devrait fonctionner même dans IE7.

    Mis à jour le violon

    InformationsquelleAutor Giovanni
  3. 4

    Aussi, comme Giovanni solution, quelque chose comme cela pourrait également fonctionner.

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