Grow your CSS skills. Land your dream job.

jQuery :nth-child

  • # March 26, 2010 at 3:11 pm

    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!

    # March 27, 2010 at 4:11 am

    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.

    # March 27, 2010 at 5:14 pm

    For example:

    Code:
    $(“li:nth-child(3n)”).css(“margin-right”, 0);
    # March 28, 2010 at 1:36 am

    thanks a lot y’all! that worked great!

    # April 3, 2010 at 4:40 pm

    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

    # April 3, 2010 at 4:59 pm

    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 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".