Working with nested tables. Applying styles to cells of topmost table only

I have a page with nested tabl开发者_StackOverflowes. I need to be able to apply certain styles only to odd rows of the top level table and not to the tables within this table.

Not really sure hot to do that... I think with jQuery I can do something like this:

$(".topTable tr:odd td").addClass(".rowColor");

This should work:

$(".topTable > tbody > tr:odd").addClass("rowColor");

Live demo: http://jsfiddle.net/simevidas/r5UgL/3/

but I recommend against nesting tables.

You have only 1 mistake, remove the dot when adding your class. It should be:

$(".topTable tr:odd td").addClass("rowColor");

or apply the css to the tr:

$(".topTable tr:odd").addClass("rowColor");

Hope this helps. Cheers

If you insist on using jQuery to do this you are actually being a bit too specific, you really only need:

$('.topTable tr:odd').addClass('rowColor');

This is kind of nitpicky because your method would work, but it applies the class to every TD in odd TRs and really you only need to apply it once to the odd TRs.

However, you can also do this in straight CSS (Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+) with something like:

.topTable > tbody > tr:nth-child(odd){
    background-color:red;
}

example here: http://jsfiddle.net/DFwHL/7/