CSS - plus de sélecteur de sélectionner des éléments plus grande que N

J'ai plusieurs <p> éléments dans mon corps HTML. Je veux seulement montrer les deux premiers paragraphes, et de définir display:none à tous les paragraphes après. Pourquoi le code suivant ne fonctionne pas?

<html>

<head>
    <style type="text/css">
        p:gt(2) { display:none; }
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</body> 

</html>

Mon code affiche toujours tous les 4, paragraphe éléments dans le navigateur web google Chrome.

Comment puis-je corriger mon code pour atteindre l'objectif au départ, j'avais dit?

:gt(2) est un jQuery chose spécifique pour autant que je sache.

OriginalL'auteur John | 2012-09-23

  1. 20

    Si ils sont frères et sœurs l'approche la plus simple avec une certaine compatibilité ascendante serait:

    p + p ~ p {
    display: none;
}

    JS Fiddle démo.

    Vous pouvez également utiliser:

    p:nth-of-type(2) ~ p {
    display: none;
}

    JS Fiddle démo.

    Références:

    Ou p:nth-of-type(n+3).
    absolument, mais au moment de la rédaction de cette suggestion a déjà été posté ailleurs et, tandis que son inclusion aurait amélioré cette réponse, il se sentirait trop comme sans vergogne la copie (même si je l'attribue à l'auteur original).

    OriginalL'auteur David Thomas

  2. 5

    :gt est juste un jQuery court à la main,
    pour le sélectionner dans la css:

    p:nth-of-type(n+3)
    Ce n'est pas "juste un jQuery raccourci". C'est complètement différent de ce sélecteur.
    Qui a exactement la même fonction et est plus courte si je ne me trompe..

    OriginalL'auteur Armel Larcier

  3. 3

    Vous pouvez utiliser le sélecteur de frères:

    p + p + p {display:none;}

    Autres que les deux premiers, il sélectionne tous les!

    jsFiddle: http://jsfiddle.net/KK3mk/

    OriginalL'auteur Praveen Kumar Purushothaman