5

I need a css selector for first <tr> in a <table>.

I had searched on the internet and got some selectors like tr:first-child table *:first-child tr:first-child, table tr:first-child. But they do not works on my situation...

Here is a piece of HTML code which need to handle:

<table>
  <thead>
    <tr><th>you should chose this row</th></tr>
    <tr><th>not this one</th></tr>
  </thead>
  <tbody>
    <tr><td>not this one</td></tr>
  </tbody>
</table>


<table>
  <colgroup>
    <col></col>
  </colgroup>
  <thead>
    <tr><th>you should chose this row</th></tr>
    <tr><th>not this one</th></tr>
  </thead>
  <tbody>
    <tr><td>not this line</td></tr>
  </tbody>
</table>


<table>
  <colgroup>
    <col></col>
  </colgroup>
  <tbody>
    <tr><td>you should chose this row</td></tr>
    <tr><th>not this one</th></tr>
  </tbody>
</table>

(prefer a solution without javascript)

tsh
  • 4,263
  • 5
  • 28
  • 47
  • There's no css selector for first child in all of it's children. Yet, I'd say (not knowing your exact usecase) is that there might be semantical considerations, that would lead for you to ditch `` and `` differentiation. If you need a style for the first `` that means for me that that row has the same meaning in some way, which conflict with the fact that you put them in `` and ``. I would recommend to you that choose either `` or ``, given that they need the same style, they must have similar meanings too. – Mihaly KR Jan 09 '17 at 10:23

3 Answers3

3

there isn't any selector that would work for you without adding some classes to distinguish different cases

thead tr:first-child would work for first two examples, but it would fail in the 3rd

EDIT: you could also try something like this:

thead tr:first-child,
tbody tr:first-child {
    /* your css styles */
}

thead + tbody tr:first-child {
    /* reset css from previous selector */
}

but if I were you I'd avoid doing that

pwolaq
  • 6,343
  • 19
  • 45
3
table tr:first-of-type

should work. First-child is often missunderstood. It doesn´t care much about the element before the ":", it only looking "what is the first child of that element?". If it happend to be the same as before the ":", everything is fine. But if not, like in your case, nothing happens. So, in most case is more useful to write something like

table > :first-child

That wouldn´t help in your case here, but is the best way to use :first-child (or *-child in general) i think. If you want to get the first appearance of a element, :first-type is your answer.

Update I saw that point in another questions: If you don´t want the rows of the thead, you need to use tbody as parent element of course.

tbody tr:first-of-type

or

tbody > :first-child
Stefan Vilbrandt
  • 282
  • 3
  • 11
  • As I commented on another, now-deleted answer, tr:first-of-type "would match every first tr in every thead and tbody. It's basically the same as tr:first-child." – BoltClock Jan 09 '17 at 17:36
  • Also, that's a picture I haven't seen in a while. I gotta dig up my copy of Black & White and play it again. – BoltClock Jan 09 '17 at 17:38
  • Was a nice game back then, i agree ;) tr:first-child is not always the same as tr:first-of-type. First-child could be thead or colgroup too. But i updated my answer to be a bit more precise. – Stefan Vilbrandt Jan 09 '17 at 17:39
  • tr is never a child of table in HTML DOM, see http://stackoverflow.com/questions/5568859/why-doesnt-table-tr-td-work-when-using-the-child-selector As for your update, that would match the tbody > tr in the second example, where it should not, because there's a thead before the tbody. – BoltClock Jan 09 '17 at 17:46
  • Ah, i never tried table > :*-child for tr. Now i understand your first comment better. Just made a quick test, :first-of-type really match thead and tbody. Should have taken a bit more time for testing myself. Hm, let´s rethink the solution... – Stefan Vilbrandt Jan 09 '17 at 17:53
  • Yes, but it is not correct either. In your case it would mark the first tr of thead and tbody too. The answer from pwolaq seems to be about right. – Stefan Vilbrandt Jan 09 '17 at 18:01
  • It wouldn't. The four selectors in the list are all mutually exclusive. Study the first portion of each selector (before the > tr:first-child) carefully. – BoltClock Jan 09 '17 at 18:05
2

If the first row group in your table is either a thead or a tbody, and assuming the only children your table will have are colgroup, thead and tbody:

thead:first-child > tr:first-child,
tbody:first-child > tr:first-child,
colgroup + thead > tr:first-child,
colgroup + tbody > tr:first-child

(If the first row group may instead be a tfoot, add the appropriate selectors to the list. Either way, you need all of them in order to cover all the bases.)

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Append these if using a caption without a colgroup: `caption + thead > tr:first-child, /* 1st tr of thead */` `caption + tbody > tr:first-child /* 1st tr of 1st tbody */` – DWB May 17 '23 at 23:56