[CSS] Select First Row of Table
See the demo below. The first row is selected and styled.
| (1,1) | (1,2) | (1,3) | (1,4) |
| (2,1) | (2,2) | (2,3) | (2,4) |
| (3,1) | (3,2) | (3,3) | (3,4) |
HTML:
<table class="first-row">
<tbody>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
<td>(1,3)</td>
<td>(1,4)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
<td>(2,3)</td>
<td>(2,4)</td>
</tr>
<tr>
<td>(3,1)</td>
<td>(3,2)</td>
<td>(3,3)</td>
<td>(3,4)</td>
</tr>
</tbody>
</table>
CSS:
table.first-row > tbody > tr:nth-of-type(1) {
font-size: larger;
color: red;
}
We use nth-of-type CSS selector to select the first tr of the table. If you want to select n-th row, change the number from 1 to n.
You may also be interested in [CSS] Select First Column of Table
Tested on: Chromium Version 56.0.2924.76 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)