css direct child selector doesn't work

[dna5122]

Any idea why when I have a table such as this:

<table>
<tr>
<td>
Hello
</td>
</tr>
<table>

and CSS like the following:

table > tr > td
{
color: yellow;
background-color: red;
}

it doesn't select anything. Now correct me if I'm wrong, but td is a child of tr which is a child of table, and the previous code doesn't make the background red or the text yellow. It doesn't work in any browser that supports child selectors.

 

[Cache-man]

I'm not sure if you can use CSS like that (maybe you can but I've never done it that way.

Personally I would use a class for the <td> cells you wish to style as follows:
<table>
<tr>
<td class="yellowonred">
Hello
</td>
</tr>
<table>

and then the css as follows

.yellowonred
{
color: yellow;
background-color: red;
}

Now, using this approach you would have to apply the class to every <td> tag you wish to style, which could be tedious for a complicated table structure.
Alternatively, I think you could apply the class to the <table> tag if you wanted the whole table styled this way.

Hope this helps.
Cache-man

 

[dna5122]

I figured it out. The DOM shows a tbody element between table and tr, so even though it's not coded that way all the browsers insert it.

I don't have the option of changing the html code. I have to work with what is there and it's not about changing the colors or anything. I have to select certain elements within the table to applying floats and such.