:nth-child is not working in IE
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
Sarah
Updated on June 04, 2022Comments
-
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 over 13 yearsHow do I create and link this jquery file... Just like any normal .js file?
-
Sarah over 13 yearsI 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 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.