pondpad pondpad - 6 months ago 17
CSS Question

Selecting first td in the first table with CSS 3

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
#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 declaration in your html to get support for :first-child. http://www.w3schools.com/cssref/sel_firstchild.asp

Comments