Question

I have a CSS class called grid which I place on my tables. I want to Zebra strip my even rows so I use the following jQuery code

$('.grid tr:nth-child(even)').addClass('even'); 

This basically says ‘Apply the css class even to any tr tag which has a parent (at any level) with a class of grid.’ The problem with this is when I have nested tables, the child table’s tr tags will also get the even style. Since I did not specify the child table with a class of grid, I don’t want it to pick up the zebra stripe.

How can I specify to only apply the even class on tr tags which are a direct descendant of the tag which has the grid class?

Answer 1

You want to use a different selector, like the child selector:

$('.grid > tr:nth-child(even)').addClass('even'); 

This limits the selection to direct children your .grid only.