CSS direct descendant ">" operator not working (and it's not IE6)?

Question

I am trying to do something very simple - select the tags which are direct descendants of a tag.

The CSS I am using is as follows:

table.data > tr { background-color: red; }

My HTML looks like this:

<table class="data">
    <tr>
        ...
    </tr>
</table>

But no red background is forthcoming! If I remove the ">" character from the CSS, it works! I have tried this in Firefox, IE 8, Chrome and Safari, and all the browsers do exactly the same thing.

Hopefully someone can help me after so many frustrating hours! I know I am doing something extremely stupid, but I can't figure out what it is.

Answer 1

Most¹ browsers automatically insert a tbody element into a table, so the css should be:

table.data > tbody > tr { background-color: red; }

to account for that.

---

¹ I think that all browsers do this, but I don't have the capacity, or time, to check that assumption. If you're concerned that there might be some users with a browser that doesn't do this, you could offer both selectors in the css:

table.data > tr,
table.data > tbody > tr { background-color: red; }