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

Solution 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.

Solution 2:

You can deal with the thead situations like this:

trtd:first-child, trth:first child {some styles}
thead + tbodytrtd: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.

Solution 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.