The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery :nth-child

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #28535

    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!


    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:

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

    thanks a lot y’all! that worked great!


    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?



    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.