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.

I don't think it's doable with CSS alone. Do you have jQuery available? — isherwood, Mar 20 '13 at 13:56
i'd rather use css alone, but if it is the only option i would prefer change the table and face the refactoring — Nicos Karalis, Mar 20 '13 at 13:58
Your fiddle doesn't illustrate your problem description clearly. Do you only want to select the first and last cells of the first row in the entire table, regardless of whether the row is in a `thead`, `tbody` or `tfoot`? What about the last row? What do you need to do if there are both header cells and data cells? — BoltClock, Mar 20 '13 at 18:53
I assume that he wants to highlight the cells at the corner of the table, regardless of table wrappers like `thead`, `tbody` and `tfoot`. — danijar, Apr 11 '13 at 17:15

ScottS · Answer 1 · 2013-04-11T17:19:21.407

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.

This approach breaks the markup whenever there are HTML elements nested in table cells. — danijar, Apr 11 '13 at 17:06
@danijar: Good call, I need to update with direct child selectors. — ScottS, Apr 11 '13 at 17:17

score 0 · Answer 2 · answered Mar 20 '13 at 14:01

0

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.

answered Mar 20 '13 at 14:01

isherwood

58,414
16
114
157

Got a fiddle? It's a basic sibling selector. – isherwood Mar 20 '13 at 14:23
Ok, now i got it, let me check this – Nicos Karalis Mar 20 '13 at 14:27
ok, i manage to select only the first line of the table (http://jsfiddle.net/NicosKaralis/DamGK/2/), but now, how can i select only the ones in the bottom? – Nicos Karalis Mar 20 '13 at 14:38
To quote myself, "I don't see how you'd handle the same situation for the tfoot". :-) The problem is that you can't select a *previous* sibling with CSS. – isherwood Mar 20 '13 at 15:13
aparentlly with css4 we can, using: ``div! li + p.something`` this will keep the scope on div, but... this is only for css4 which is not common yet – Nicos Karalis Mar 20 '13 at 17:18
There is no need to override styles for the wanted effect. Therefore you should avoid doing so. – danijar Apr 11 '13 at 17:10

danijar · Answer 3 · 2013-04-11T17:15:37.423

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.

Select only the first row in a table with css

3 Answers3

I think you were being too specific

Linked