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.