IE: nth-child() using odd/even isn't working
Solution 1
IE8 doesn't support the nth-child
selector I'm afraid:
http://reference.sitepoint.com/css/pseudoclass-nthchild
Solution 2
As a good workaround, jQuery has added this to their 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 to do this:
$(document).ready(function() {
$(".my_table tr:nth-child(even)").addClass("even");
$(".my_table tr:nth-child(odd)").addClass("odd");
});
Solution 3
You can use first-child and "+" to emulate nth-child, example:
tr > td:first-child + td + td + td + td + td + td + td + td {
background-color: red;
}
That select the 9th column, just like nth-child(9), and that works on IE
Solution 4
I made some time ago, a prude 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;
};
The usage is quite simple and similar to the 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/
Solution 5
This is the Dojo version, it works fine:
dojo.addOnLoad(function(){
dojo.query("table tr:nth-child(odd)").addClass("odd");
dojo.query("table tr:nth-child(even)").addClass("even");
});
Comments
-
ajax333221 over 1 year
My table (that works perfectly on Chrome, FireFox and Opera) is not displaying correctly on 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; }