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

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