CODEWITHSUNDEEP
cssinternet-explorer-8css-selectors
dmr
dmr

Reputation: 22333

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

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?

Upvotes: 11

Views: 8402

Answers (3)

froadie
froadie

Reputation: 83033

You can also try downloading and including selectivizr, which makes css3 selectors work in IE6-8

Upvotes: 0

KatieK
KatieK

Reputation: 13843

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

Upvotes: 3

Pow-Ian
Pow-Ian

Reputation: 3635

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.

Upvotes: 4

Related Questions