jQuery :nth-child

[Historical Forums User]

I want to use jQuery to make the :nth-child selector work in IE. I read Chris’s article on the :nth-child selector and he said the following:

"One saving grace here is that if you are using jQuery, which supports all CSS selector including :nth-child, the selector will work, even in Internet Explorer."

So how exactly is this done? Any help would be great!

[noahgelman]

He doesn’t mean that use jquery, you can make :nth-child work in your CSS. He means you can use :nth-child when you use jquery and it will work. even in IE.

[Chris Coyier]

For example:

Code:

$(“li:nth-child(3n)”).css(“margin-right”, 0);

[Historical Forums User]

thanks a lot y’all! that worked great!

[andiszek]

hello,
very nice trick! i`ve played around and it does magic:) thanks.

i have a quick question: is there any possibility to add multiple styles to the selected children?
for now this works, but i`d like to add 2 or morestyles at once:

$(".wrappingDiv div:nth-child(3n+3)").css("margin-right", 0);
$(".wrappingDiv div:nth-child(3n+3)").css("background", "#333");
is there any way to combine them?

or even simpler:
is it possible to add to each nth child a special class, (eg: ".3rd" ), so i can control it via the external CSS file only?

thanks,
andi

[andiszek]

well, i found out hot how to control the styles for every nth-child via the external file and am going to post it, in case anybody else is interested:

add this to the HTML page:
$(".wrappingDiv div:nth-child(3n+3)").css();

and then target it in the external CSS file:
.wrappingDiv div:nth-child(3n+3) {add-your-styles;}

cool stuff! thanks again for the tutorial!

[Author]

Posts