CSS selection of first column of first row of a table (excluding nested tables)

Question

I'm having difficulty with CSS selectors and I hope someone can perhaps help me out here.

I have some HTML that looks like so:

<table class=myTable>    <tr>       <td>this is the td of interest</td>    </tr>    <tr>       <td>          <table>             <tr><td>I don't want this td!</td></tr>          </table>       </td>    </tr> </table> 

I am trying to apply a background image to the FIRST td of the FIRST tr. So I tried the following:

table.myTable tr:first-child td:first-child {     background-image: url(someUrl.gif); } 

But this is also finding the first td of the first tr of the nested table. I've tried different combinations with > and +, but no luck. Anyone have any ideas?

Note: I'm aiming for a solution that is compatible with IE7+.

Answer 1

The selector you need is

table.myTable > tbody > tr:first-child > td:first-child 

There is an implicit TBODY element in there, even though you don't have it in the code.

Answer 2

table.myTable > tr:first-child > td:first-child 

The > means the tr that is a direct child of table