:nth-child is not working in IE

Question

Hey guys

Ive searched for my specific problem and can't find it... I hope any of you guys can help.

Im trying to get nth-child to work in IE - now Ive read that you can do it with Jquery, how do I implement jquery in this instance?

Im also using this Lib item ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

It works perfectly in Firefox but not IE - please help - thanks

        <div class="info-col">
        <h2>Header 1</h2>
        <a class="imagehref="imagepath">View Image</a>

        <dl>
          <dt>Sub header 1</dt>
             <dd>Copy 1.</dd>
          <dt>Sub header 2</dt>
             <dd>Copy2</dd>
          <dt>Sub header 3</dt>
             <dd>Copy 3</dd>
          <dt>Sub header 4</dt>
             <dd>Copy 4</dd>
          <dt>Sub header 5</dt>
             <dd>Copy 5</dd>
          <dt>Sub header 6</dt>
             <dd>Copy 6</dd>
        </dl>        
    </div>

Javascript code

$(function() {

// Set up variables
var $el, $parentWrap, $otherWrap, 
    $allTitles = $("dt").css({
        padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
        "cursor": "pointer" // make it seem clickable
    }),
    $allCells = $("dd").css({
        position: "relative",
        top: -1,
        left: 0,
        display: "none" // info cells are just kicked off the page with CSS (for accessibility)
    });

// clicking image of inactive column just opens column, doesn't go to link   
$("#page-wrap").delegate("a.image","click", function(e) { 

    if ( !$(this).parent().hasClass("curCol") ) {         
        e.preventDefault(); 
        $(this).next().find('dt:first').click(); 
    } 

});

// clicking on titles does stuff
$("#page-wrap").delegate("dt", "click", function() {

    // cache this, as always, is good form
    $el = $(this);

    // if this is already the active cell, don't do anything
    if (!$el.hasClass("current")) {

        $parentWrap = $el.parent().parent();
        $otherWraps = $(".info-col").not($parentWrap);

        // remove current cell from selection of all cells
        $allTitles = $("dt").not(this);

        // close all info cells
        $allCells.slideUp();

        // return all titles (except current one) to normal size
        $allTitles.animate({
            fontSize: "14px",
            paddingTop: 5,
            paddingRight: 5,
            paddingBottom: 5,
            paddingLeft: 5
        });

        // animate current title to larger size            
        $el.animate({
            "font-size": "20px",
            paddingTop: 10,
            paddingRight: 5,
            paddingBottom: 0,
            paddingLeft: 10
        }).next().slideDown();

        // make the current column the large size
        $parentWrap.animate({
            width: 320
        }).addClass("curCol");

        // make other columns the small size
        $otherWraps.animate({
            width: 140
        }).removeClass("curCol");

        // make sure the correct column is current
        $allTitles.removeClass("current");
        $el.addClass("current");  

    }

});

$("#starter").trigger("click");

});

Answer 1

IE doesn't support :nth-child. Use jQuery with the regular CSS selector, e.g.:

$('dl dt:nth-child(2n)') // gets every 2nd dt

Answer 2

There are various ways to use jQuery with :nth-child pseudo-selector:

$('dt:nth-child(odd)') // gets every odd-numbered dt
$('dt:nth-child(even)') // gets every even-numbered dt
$('dt:nth-child(3n)') // gets every third dt

---

Edited in response to @Unihost's question (in comments, below):

How do I create and link this jquery file... Just like any normal .js file?

Absolutely, the only thing to remember is that you're presumably using the jQuery to apply css, so I'd suggest using it in the following manner:

$('dt:nth-child(odd)').addClass('oddDts');
$('dt:nth-child(even)').addClass('evenDts');

And then add the following (as a demo) to your css:

dt:nth-child(odd), /* for useful 'modern' broswers that understand */
dt.oddDts {        /* referencing the class applied with IE-specific jQuery file */
    background-color: #ffa;
}
dt:nth-child(even), /* for useful 'modern' broswers that understand */
dt.evenDts {        /* referencing the class applied with IE-specific jQuery file */
    background-color: #f00;
}

I'd strongly advise not attempting to apply all the relevant styles with jQuery, otherwise it gets very unwieldy very quickly. Plus, this way, you can use the nth-child() pseudo-selectors in your regular CSS and include the jQuery only for IE:

<!--[if ie]>
    <script src="path/to/jsFile.js" type="text/javascript"></script>
<![end if]-->

Incidentally, there's a JS Fiddle demo of intent, if you'd like to see how it might work.