Home/ Questions/Q 8571179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T18:43:33+00:00

I have several <p> elements in my HTML body. I only want to show

  • 0

I have several <p> elements in my HTML body. I only want to show the first two paragraphs, and set display:none to all paragraphs after. Why does the following code not work?

<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>

My code still shows all 4 paragraph elements in Chrome web browser.

How do I correct my code to achieve the objective I originally stated?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If they’re siblings the easiest approach with some backwards compatibility would be:

    p + p ~ p {
    display: none;
}

    JS Fiddle demo.

    You could also use:

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

    JS Fiddle demo.

    References:

    • 0