Selecting first td in the first table with CSS 3

Question

Say for example I have:

   <div id="container">
   <table>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </table>

    <table>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </table>
    </div>

And

td { width:10px; height:10px; }

What I want to do is apply a style to the first td, of the first table.

I would have expected:

#container table:first-child td:first-child {
background: red;
}

However it does not work? Please advise!

Answer 1

#container table:first-child tr:first-child td:first-child { background: red; }

Seems to work.
Note that under IE, you will need to have a !DOCTYPE decalaration in your html to get support for :first-child. http://www.w3schools.com/css/pr_pseudo_first-child.asp