Select only the first row in the table with css

Question

I have many tables on my HTML page, some of which use only tr & td others use everything they can: thead, tbody, tfoot, tr, th & td .

Since some problems we use the CSS rule to make the top and left borders of the table, and each td has its own right and bottom border.

Because it is this thing that we need to get td in all four corners and around their specific corner.

How can I make one rule that can only select the first row in the table?

I use 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 two implementations at the same time?
• if there is, how can I do this?
• If not, can you help me determine the best way to do this?

PS: I can change the table element, but it will do a lot more refactoring in third-party libraries, so we want not to change this.

Answer 1

I think you were too specific

Updated . There were no direct child selectors in the original answer, so that the elements of the child selectors apply to grandchildren, etc.

I believe this violin shows what you want. It simply uses this code to select the angles of table elements, regardless of 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 can use table.unit if your .unit class is placed on elements other than table to narrow the selection a bit, but the key is to keep the child selectors undefined.

Answer 2

You can deal with such situations:

 tr td:first-child, tr th:first child {some styles} thead + tbody tr td:first-child {revert the above styles} 

However, I don’t see how you handle the same situation for tfoot. You may need to use scripts.

Answer 3

You do not need to change the structure of the tables. They comply with the HTML standard, and there is a solution using pure CSS to get the effect you requested. Using :first-child and :last-child in the thread , tbody and tfoot table wrap elements, you can only select cells in the corners of the entire table. Here are the details.

The selector * simply selects all the elements. But > means only apply the effect to direct children. Therefore, we extract all the elements of the table listed above. There are no deeper children with a table , like tr or td .

To include both th and td , we again use * together with > to retrieve all the direct children of the table row, regardless of whether they are th or td . You could instead select a selector for both.

 .unit > *:first-child > tr:first-child > *:first-child, .unit > *:first-child > tr:first-child > *:last-child, .unit > *:last-child > tr:last-child > *:first-child, .unit > *:last-child > tr:last-child > *:last-child { background: red; } 

I created a working demo based on the code you provided on this subject.

In any case, you did not tell us why you need it, and there may be a better way to achieve this. For example, if you want to provide round corners, you can apply the effect to the table element of the wrapper div.