CSS / JavaScript: Make :nth-child(n) work in IE with jQuery script?

I’m trying to get the CSS pseudo :nth-child(n) function to work in Internet Explorer and that isn’t an easy task.

I founded some JavaScript in jQuery to get the job done in IE but I can’t seem to get it to work. The examples I’ve tried is with unsorted lists (ul and li’s) but my CSS code (which works well in all other browsers) looks like this:

#portfolio div:nth-child(4) { some styling }
#portfolio div:nth-child(3) { some styling }
#portfolio div:nth-child(2) { some styling }

The javascript I tried to run by appending it to my existing script.js file is:

$('div#portfolio div:nth-ch开发者_Python百科ild(4)').css({' filter:' : progid:DXImageTransform.Microsoft.Matrix(M11=0.99984770, M12=-0.01745241, M21=0.01745241, M22=0.99984770); ‘});

But that does not work. I’ve tried to remove the “div#portfolio” and retype it but nothing I do will make it work in IE.

Any help would be appreciated.

Sincere

- Mestika

here's sample fiddle I did for an earlier example, link

I would suggest you maybe use the jQuery to add a class to the nth-child (I've done so for the "yellow" class), then add the rules to the CSS with the others, though note that the classed rule can't be grouped with the nth-child original selector which may not be a duplication problem if you're using it for a filter anyway ;)

You could try IE9.js: http://code.google.com/p/ie7-js/

Just include the Javascript file in your page, and your nth-child CSS should work properly in IE.

Someone else has already mentioned Dean Edwards' ie7/ie8/ie9.js, which tries to retro-fit a whole range of broken and missing features into IE.

You could also try Selectivizr, which concentrates on adding advanced CSS selector support to IE. It requires another library such as JQuery to do the heavy lifting of the working with the selectors, but since you specified that in the question anyway, it should be a good fit for you.

Is that the exact code you are using, because the nth-childpart is ok, the syntax for the .css() call is completely wrong.

Drop the space and the colon from the first parameter ('filter') and the second parameter has to be a string to.