CSS Table, Table Row Styling

Question

In my CSS document, I have a selector for my leaderboard table.

table#leaderboard {
     some css
     some css
}

How would I write CSS for the tr, or td for the leaderboard table? Would it be inside the table#leaderboard section?

Thanks,

David

Answer 1

If you want to target all the <tr> or <td> children inside the table use:

table#leaderboard tr
{
    /*whitespace combinator*/
    /*all children*/
}

If you want to target only the direct children (in case you have nested tables) use:

table#leaderboard > tr
{
    /*right arrow combinator*/
    /*direct children only*/
}

Edit

Outside the

table#leaderboard {
     some css
     some css
}

that is. You can't nest CSS.

<table>
    <tr>
        <td>Direct td child of tr</td>
    </tr>
    <tr>
        <table>
            <tr>
                <td>Indirect td child of the outer tr</td>
            </tr>
        </table>
    </tr>
</table>