Kita bisa mengubah atau mengganti warna background pada baris pertama saja dari tabel dengan memanfaatkan :first-child
selector.
.table-custom tbody tr:first-child {
background-color: #D4EDDA;
}
<table class="table-custom">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Irman</td>
</tr>
<tr>
<td>2</td>
<td>Firmansyah</td>
</tr>
<tr>
<td>3</td>
<td>Irman Firmansyah</td>
</tr>
</tbody>
</table>
:first-child
selector akan otomatis mengambil child element pertama dari parent nya, jika di CSS nya tidak di-set parent element nya.
tbody tr:first-child
berarti akan mengambil element tr
pertama dari parent element tbody
.
Jika tidak menggunakan tbody
, maka setiap tr
pertama yang ditemukan akan ikut di-set warna background nya. Termasuk pada element thead
.