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.: I can change the element of the tables, but it will make so much more refactoring in third party libraries, so we want not to change that.

Answer 1

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.