:nth-child is not working in IE

11,614

Solution 1

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.

Solution 2

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

$('dl dt:nth-child(2n)') // gets every 2nd dt
Share:
11,614
Sarah
Author by

Sarah

Updated on June 04, 2022

Comments

  • Sarah
    Sarah almost 2 years

    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");
    
    });
    
  • Sarah
    Sarah over 13 years
    How do I create and link this jquery file... Just like any normal .js file?
  • Sarah
    Sarah over 13 years
    I seem to have found a solution by adding this to my css But it can get very long if you have a massive grid dt:first-child { background: #b44835; } dt:first-child + * { background: #b44835; } dt:first-child + * + * { background: #ff7d3e; } dt:first-child + * + * + * { background: #ff7d3e; } dt:first-child + * + * + * + * { background: #ffb03b; } dt:first-child + * + * + * + * + * { background: #ffb03b; }
  • Sikshya Maharjan
    Sikshya Maharjan over 13 years
    @Unihost, just a thought but, seriously, please consider not doing that. It's unnecessary, use :nth-child() for the useful browsers (Firefox, Chrome, Safari, Opera...) and just use conditional comments and jQuery to bring IE up to speed. The keep-it-simple principle is a good one.