IE: nth-child () using odd / even does not work

Question

My spreadsheet (works fine on Chrome, FireFox, and Opera) doesn't display correctly in Internet Explorer.

The background remains white! (I am using IE-8)

CSS code:

/*My Table*/ .my_table{ border-collapse:collapse; font:normal 14px sans-serif,tahoma,arial,verdana; margin:5px 0; } .my_table th{ color:#fff; background:#5E738A; border:1px solid #3C5169; text-align:center; padding:4px 10px; } .my_table td{ color:#555; border:1px solid #C1CAD4; text-align:center; padding:2px 5px; } .my_table tr:nth-child(even){ background:#E6EDF5; } .my_table tr:nth-child(odd){ background:#F0F5FA; } 

Answer 1

IE8 does not support the nth-child selector, I'm afraid:

http://reference.sitepoint.com/css/pseudoclass-nthchild

Answer 2

As a good workaround, jQuery added this to her project, and achieving this using JavaScript is acceptable:

For my CSS, I would have

 .my_table tr.even{ background:#E6EDF5; } .my_table tr.odd{ background:#F0F5FA; } 

And I would use jQuery for this:

 $(document).ready(function() { $(".my_table tr:nth-child(even)").addClass("even"); $(".my_table tr:nth-child(odd)").addClass("odd"); }); 

Answer 3

This is a problem of IE8 (and IE versions prior to), and this link shows a good fix:

http://verboselogging.com/2010/01/17/making-nth-child-work-everywhere

Answer 4

You can use first-child and "+" to emulate nth-child, for example:

 tr > td:first-child + td + td + td + td + td + td + td + td { background-color: red; } 

Select the ninth column, like nth-child (9), and that works in IE

Answer 5

This is the Dojo version, it works great:

  dojo.addOnLoad(function(){ dojo.query("table tr:nth-child(odd)").addClass("odd"); dojo.query("table tr:nth-child(even)").addClass("even"); }); 

Answer 6

I made some time ago, a simple javascript solution for this problem:

https://gist.github.com/yckart/5652296

 var nthChild = function (elem, num) { var len = elem.length; var ret = []; var i = 0; // :nth-child(num) if (!isNaN(Number(num))) { for (i = 0; i < len; i++) { if (i === num - 1) return elem[i]; } } // :nth-child(numn+num) if (num.indexOf('+') > 0) { var parts = num.match(/\w/g); for (i = parts[2] - 1; i < len; i += parts[0] << 0) { if (elem[i]) ret.push(elem[i]); } } // :nth-child(odd) if (num === 'odd') { for (i = 0; i < len; i += 2) { ret.push(elem[i]); } } // :nth-child(even) if (num === 'even') { for (i = 1; i < len; i += 2) { ret.push(elem[i]); } } return ret; }; 

Usage is quite simple and similar to a css selector:

 var rows = document.querySelectorAll('li'); var num = nthChild(rows, 2); var formula = nthChild(rows, '3n+1'); var even = nthChild(rows, 'even'); var odd = nthChild(rows, 'odd'); // Note, forEach needs to be polyfilled for oldIE even.forEach(function (li) { li.className += ' even'; }); odd.forEach(function (li) { li.className += 'odd'; }); formula.forEach(function (li) { li.className += ' formula'; }); num.style.backgroundColor = 'black'; 

http://jsfiddle.net/ARTsinn/s3KLz/