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

+, 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.