Articles jQuery NTH-Child-in-all-browsers

---

tutorials - jQuery and Web-Development.

NTH-Child in all browsers

Published Tue. Sep. 18, 2012

---

Use the jQuery .addClass method to add even and odd classes to style since IE does not support :nth-child

Using the not-supported-by-IE :nth-child selector in jQuery, we can add the "fake" even and classes since :nth-child IS supported in jQuery and thus IE.

$('li:nth-child(even) a').addClass('even');
$('li:nth-child(odd) a').addClass('odd');

---

These rules, along with the jQuery function, select every-other a tag by using the added classes, "even" and "odd"

#wrapper li a.even {
    background: #efeded;
}
#wrapper li a.odd {
    background: #e8e5e5;
}

These rules select every-other a tag in browsers supporting :nth-child. (For some reason, I could not comma seperate these two sets of rules. Any ideas why?)

#wrapper li:nth-child(even) a {
    background: #efeded;
}
#wrapper li:nth-child(odd) a {
    background: #e8e5e5;
}

Tag(s): jQuery, .addClass, nth:child, nth:child in IE