CODEWITHSUNDEEP
css
pondpad
pondpad

Reputation: 743

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!

Upvotes: 23

Views: 62452

Answers (2)

p3sn
p3sn

Reputation: 1072

To select only the first table within the div:

div#container table:nth-child(1) tr td {
    color: #888;
}

To select only the first td of the first table within the div:

div#container table:nth-child(1) tr td:nth-child(1) {
    color: #444;
}

For me this works easier if you want to change it to a second table or second tablecell

div#container table:nth-child(2) tr:nth-child(4) td:nth-child(1) {
    color: #888;
}

Upvotes: 1

RickF
RickF

Reputation: 1822

#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

Upvotes: 50

Related Questions