How to get odd/even coloring for IE and Firefox using CSS alone?

I use php for my web project, but I need this coloring complement with CSS alone.

Thus I need code that works in Firefox and internet explorer.

This code is written, but does not work in internet explore开发者_StackOverflowr:

.tbl_css col:nth-child(odd){      
}

.tbl_css col:nth-child(even){    
}

Lower versions of IE will not support pseudo-selection.

You can use jQuery to make it work:

$(document).ready(function(){
    $('table tr:even').addClass('even');
    $('table tr:odd').addClass('odd');
});

In CSS simply:

.even{ /* your styles */ }
.odd { /* your styles */ }

The pseudo-selector :nth-child is supported by the newest version of all major browsers (IE 9+, FF 3.5+). If you have to support older browsers (IE 8-, for example), you can either manually assign class="odd", class="even" to your columns, or use JQuery:

$(".tbl_css col:nth-child(2n+1)").addClass("odd");
$(".tbl_css col:nth-child(2n)").addClass("even");

Rename .tbl_css col:nth-child(odd) to .odd.
Rename .tbl_css col:nth-child(even) to .even.

What version of IE are you testing with?

The nth-child selector was only added to IE in IE9. Previous version (IE8 and earlier) do not support it.

If you need to achieve this effect in older versions of IE, then you will need to use an alternative technique. The most common is simply to output your HTML with alternating classes in the <tr> elements. There are also JQuery plugins that can achieve this effect for you.

Hope that helps.