Afficher les 3 premiers éléments de la liste et de cacher le reste avec CSS nth-child

Est-il possible de sélectionner plusieurs enfants passé un nombre défini avec les sélecteurs CSS?

J'aimerais masquer tous les éléments de la liste passée #3:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li> //hide this
<li>5</li> //hide this
</ul>

ul li:nth-child(X) {  
          display:none;
        }
InformationsquelleAutor Yahreen | 2012-08-07
  1. 60

    Je ne sais pas quel navigateur prend en charge cela, mais vous pouvez passer d'une formule à :nth-of-type():

    ul li:nth-of-type(1n+4) {display: none;} /* should match your case */

    Plus de détails sur: http://www.w3schools.com/cssref/sel_nth-of-type.asp

    Modifier

    J'ai modifié à partir de (n+4) à (1n+4) depuis la première version fonctionne mais n'est pas valide. - Je l'utiliser dans les requêtes des médias pour cacher coupe-bas à des éléments sur les petits écrans.

    Exemple:

    CSS:

    b:nth-of-type(1n+4){ opacity:.3; }

    HTML:

    <b>1</b>
<b>2</b>
<b>3</b>
<b>4</b>
<b>5</b>

    • Ici's un violon.
    • Pourquoi :nth-of-type() et pas :nth-child()? Ils acceptent tous deux formules, ils ont tous deux peuvent être utilisés de façon interchangeable avec li (en supposant que des balises valides), et la prise en charge du navigateur est exactement le même.
    • Alors, êtes-vous suggérant à l'aide de :nth-child() à la place? Si oui, quelle serait la bonne façon de faire ça?
    • De toute façon est bien. Je viens de trouver ça bizarre que vous m'avez demandé :nth-child() mais il va sur une tangente et en suggérant des :nth-of-type() à la place.
    • Sa solution pour :nth-of-type() travaille dans mon code mais je ne peux pas obtenir :nth-child() de travail. Si les deux sont égaux autant que la compatibilité du navigateur, je suppose qu'il ne fait pas une différence?
    • Eh bien, les deux sélecteurs d'accepter la même formule, et cela ne devrait faire aucune différence pour li éléments (il y a une différence subtile entre les deux, mais c'est sans importance). Peut-on y voir une démo où votre :nth-child() ne fonctionne pas?
    • ok, je vois, pour <li>s, ils sont tout à fait équivalentes, j'ai mal interprété :nth-child(), c'est pourquoi je suggère à :nth-of-type()
    • C'est incroyable. CSS cela m'étonne toujours de temps à autre.

    InformationsquelleAutor DerWaldschrat