Select only the first row in a table with css

问题:

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.

回答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.

回答2:

You can deal with the thead situations like this:

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'd handle the same situation for the tfoot. You may need to use scripting.

回答3:

You don't have to change the structure of your tables. They fit the HTML standard and there is a solution using clean CSS to get the effect you asked about. Using the :first-child and :last-child on the table wrapping elements thread, tbody and tfoot allows you to fetch only the cells at the corners of the whole table. Here are the details.

The * selector simply selects all elements. But the > is means to only apply the effect to direct children. Therefore we fetch all of the table wrapping elements listed above. No deeper children of a table like tr or td are affected.

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

.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 made a working demo based on the code you provided on the question.

Anyway, you haven't told us what do you need this for and there might be a better way of achieving that. For example if you want to provide round corners, you could apply the effect to the table element of a wrapping div.