2

I have a very long text and I need to hide everything except the first two paragraphs. For various reasons I'd rather not use jquery for this site. Can this be done with css only? I know nth-child most likely will do the trick but I'm having troubles coming up with a specific rule.

<div class="text">
<p>display</p>
<p>display</p>
<p>hide from this point</p>
<p>...</p>
</div>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Barbara
  • 12,908
  • 6
  • 32
  • 43
  • Are you going to show the text after some event? Is it even necessary for that text to be there at all? I guess the solution depends on why that text needs to remain on the page even though it will not be visible. – biggles Mar 31 '12 at 17:25
  • `nth-child` is the obvious solution, but it is only supported in newer (for given amount of “new”) browsers, though – see http://caniuse.com/#search=nth-child. – kopischke May 07 '12 at 12:11
  • @kopischke I know that but I looked at my stats and most of my visitors are using chrome or firefox anyway. Some IE9, the only problem are the ones with IE8. I have to find a workaround for them or use jquery. – Barbara May 08 '12 at 09:27

4 Answers4

6

This code will give you the desired result:

​div.text > p:nth-child(n+3){
    display:none;
}​
Engineer
  • 47,849
  • 12
  • 88
  • 91
3

Use

.text p {
    display:none;
}

.text p:nth-child(-n+3) {
    display:block;
}

The above will hide any paragraphs after the second. More on CSS nth-child here.

cplusplus
  • 614
  • 6
  • 14
1

Yes this can be done with CSS

         div p:nth-child(3){ }
         div p:nth-child(4){ }
         div p:nth-child(5){ }

Is this what you are looking for?

AgnosticDev
  • 1,843
  • 2
  • 20
  • 36
1

A more compatible way would be using + or ~ selectors (resp. adjacent and general sibling selectors, OK with IE7+):

.text p ~ p ~ p {
    display: none;
}

If you're certain that there're only paragraphs, you can use + as well. If you've a list, a sub-heading, blockquote or whatever between 2 paragraphs then only ~ will match the paragraph that follow that non-p element.
First two paragraphs aren't preceded by two paragraphs so it doesn't match the selector rule and they're still displayed. The next ones are all preceded by two paragraphs (at least) so they'll be hidden.

edit: :nth-child() is a perfectly valid answer but it won't work with IE8.

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • Thanks. This should make nth-child work even in older IE browsers. Haven't tested it yet, but I'm posting it for reference. http://selectivizr.com/ http://caniuse.com/#search=nth-child – Barbara Mar 31 '12 at 21:26
  • Drawbacks: this type of scripts will slow browsers that are already the slowest browsers and obviously work only if JS is executed. But if after testing, it still fill (fit?) your needs, well it works. – FelipeAls Apr 01 '12 at 07:28
  • I know but looking at the stats it's just a small % of my visitors. Can't believe 9 of them are still using IE6. Anyway, worst case scenario they will look at long paragraphs of text. – Barbara Apr 01 '12 at 12:50