css direct child selector doesn't work

D

dna5122

Joined
Mar 22, 2006
Messages
16
Reaction score
0
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.
 
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
 
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.
 
Back
Top