Question

I don’t know exactly how I can describe this? I think its better if you look at the jsfiddle I have made..

As you can see there is a hover on some TR elements and if the TD already has another bgcoler it has to change to an alternative bgcolor..

It works fine in the first 3 rows, but if there is nested a new table deeper in the DOM the green TD’s in the new table does always have the :hover class

jsfiddle

http://jsfiddle.net/VvZuV/1/

Answer 1

Change this:

tr:hover td.green, tr.deep:hover td.green {
    background:#7bcf81;
}

To this:

tr:hover > td.green, tr.deep:hover > td.green {
    background:#7bcf81;
}

No new class needed.

http://jsfiddle.net/rCztp/

---

Explanation

As soon as you hovered over the <tr> that contained the <table>, all children, grand-children, and etc, were affected by your css rule. Using > means that only children will be affected.