Select only the first row in a table with css

Question

I have in an HTML page many tables, some of which are using only `tr & td` others are using everything they can: `thead, tbody, tfoot, tr, th & td`. Because some issues we are using a CSS rule to make the top and left border of the table and every `td` has its own right and bottom border. Because this particular thing we need to get the `td`'s in all four corners and round their specific corner. How can I do a single rule that can select only the first row in the table? I'm using this rule so far: ``` table.unit tr:first-child td:first-child, table.units thead tr:first-child th:first-child { border-top-left-radius: 10px; } table.unit tr:first-child td:last-child, table.units thead tr:first-child th:last-child { border-top-right-radius: 10px; } ``` In this jsfiddle you can see my problem: (http://jsfiddle.net/NicosKaralis/DamGK/) - is there a way to solve the 2 implementations at the same time? - if there is, how can I do it? - if not, can you help me figure the best way to do it? P.S.…

Accepted Answer

I think you were being too specific

Updated: original answer did not have the direct child selectors to keep the child selectors elements from propagating to grandchildren, etc.

I believe this fiddle shows what you want. It just uses this code to select the corners of the table elements, no matter the configuration:

```
/* This works for everything */
.unit > :first-child > :first-child > :first-child, /* Top left */
.unit > :first-child > :first-child > :last-child,  /* Top right */
.unit > :last-child > :last-child > :first-child,  /* Bottom left */
.unit > :last-child > :last-child > :last-child    /* Bottom right */
{
    background: red;
}
```

Of course, you could use `table.unit` if your `.unit` class is put on other elements besides a `table` to narrow the selection somewhat, but the key is to keep the child selectors vague.

Select only the first row in a table with css

Solution

Problem