IE8: what to use in place of nth-of-type(n)?

Question

I've inherited the following CSS code to initially hide the latter elements of a series of paragraphs and a series of list items.

.profileSection p:nth-of-type(n+2) {
    display: none;
}

.profileSection li:nth-of-type(n+6) {
    display: none;
}

Obviously, this code does not work in IE8. What is an alternate way to hide these elements?

Answer 1

Here is a discussion on it:

http://www.thebrightlines.com/2010/01/04/alternative-for-nth-of-type-and-nth-child/

The writer mentions that you can reference specific children element by using

tagname + tagname + etc

Or get generic children by using

* + * + etc

I personally would just add a special class to those items.

Answer 2

+, the adjacent sibling selector, would allow you to select all siblings which are immediately adjacent. In your case: .profileSection p+p. (If you must do this, consider wrapping it in something to prevent other browsers from seeing it, like conditional comments.)

But + won't help if your markup contains something other than <p> elements right next to each other. For example:

<p>Alpha</p>
<h4>Header</h4>
<p>Beta</p>

If you don't already have some kind of shiv or moderizr functionality on the site (which would help with many other similar issues), it would be easiest to add a special class to the elements, and select using that class.