Skip to content

Alternative for :nth-of-type() and :nth-child()

Replace a CSS3 selector that’s not supported in IE with a CSS2 selector that has support.

View demo

One thing I really like about jQuery is the ease by which you can select the nth item of a list of items like this: jQuery("ul > li:eq(3)"). In CSS you would select an nth item like this: ul > li:nth-of-type(3). The problem is that :nth-of-type() is not supported at all in Internet Explorer. IE9 will support all CSS3 selectors, including :nth-of-type(), but by the time IE9 is a mature browser, Webkit and Gecko-based browsers are be able to do everything except your dishes.

So if you want to make an exception for, say, the third menu item, you have to either add a class to that menu item or select that item through Javascript. But if you don’t care for IE6, there’s a reasonable alternative:

ul > li:nth-of-type(3) equals ul > li:first-child + li + li.

Although both selectors are different, they do select the same element. But the first is not supported in IE and the second is. From IE7 and up! Sure, it’s not feasible to select the 100th item in a list, but not all lists are that long. And you can always use Javascript as a fallback.

This alternative selection method is by the way by no means equal to :nth-of-type(). With :nth-of-type() you can make a cool zebra striping without the use of Javascript.

And finally, as suggested in the title, there is also a way to handle :nth-child(3) in an almost similar fashion:

ul > li:nth-child(3) equals ul > *:first-child + * + *.

Bookmark and Share
20 Responses
Follow responses to this entry through this RSS.
  1. wally borlan

    that’s weird, it still won’t work for me in IE after I changed it to what you said.. (IE 8)

  2. Wouter Bos

    Can you show me an example?

  3. John Richardson

    Works Great! Thanks a bunch.

  4. nomadsolo

    Your are the man!
    This fix saved me. Everyone else was saying that ie doesn’t support nth-child. This is definitely a good workaround for most situations.

  5. Tim T

    This totally saved my ass. Works perfectly for a simple nav.

  6. Alternative for :nth-of-type() and :nth-child() « breakerbone’s blog

    [...] quite a while to find out how to make the nth-of-type work in IE. Thankfully I was able to bump to thebrightlines.com. Below is their blog [...]

  7. Neil

    This is great, exactly what I was looking, has saved me a bunch of time!! Thanks.

  8. Tochi

    This is great. Really saved my ass too….#Tim T

  9. ponraj

    wow…thanks a lot

  10. Fatman

    “ul > li:nth-of-type(3) equals ul > li:first-child + li + li”

    Not necessarily true. Be careful.

  11. chandrasekar

    Good work..is there any solutions for last child for ie7

  12. Wouter Bos

    No. I generally use JavaScript (jQuery) if I really need to select the last child and if there’s no easy server-side solution at hand.

  13. Hung Tran

    That’s Great! Exactly what I was looking for. Thanks man!!!

  14. Rainer

    Just A-W-E-S-O-M-E, thanks dude!

  15. Ivan

    Not much of a workaround when you have to select an item dynamically. like say “:nth-of-type(” + index +”)

  16. sohail

    great bro. it worked

  17. Wouter Bos

    I know, it’s far from perfect, but there aren’t much options around when some standard is just not implemented yet.

  18. Aravind

    Though this solution works for ul > li:nth-child(3), it won’t work for ul > li:nth-child(3n) or ul > li:nth-child(3n+1) kinda selectors.

  19. Pranay

    li:first-child + li + li – this will work only till 9th element. If you want to select 10th or 11th element, this trick will not help at all.

  20. Tammy

    Thank you so much! Made my day.
    It works not just for unordered list, but for tr td too.

    /** Hide the third cell in a row – This is equivalent to #so_uwContactInfo_row1 > td:nth-child(3) but won’t work for IE8 and below **/
    #so_uwContactInfo_row1 > *:first-child + * + * {
    display: none;
    }

Leave a response