How can I apply style to each last rows before specific class in a table?

Asked May 04 '21 at 09:48

Active May 12 '21 at 11:37

Viewed 33 times

I need to style the last row in each group (that is Row 3, Row 5 and Row 8). My css sample only apply style to Row 8.

Code:

tr.row:last-child td {
  background-color: red;
}

<table>
  <tr class="group">
    <td>Group 1</td>
  </tr>
  <tr class="row">
    <td>Row 1</td>
  </tr>
  <tr class="row">
    <td>Row 2</td>
  </tr>
  <tr class="row">
    <td>Row 3</td>
  </tr>
  <tr class="group">
    <td>Group 2</td>
  </tr>
  <tr class="row">
    <td>Row 4</td>
  </tr>
  <tr class="row">
    <td>Row 5</td>
  </tr>
  <tr class="group">
    <td>Group 3</td>
  </tr>
  <tr class="row">
    <td>Row 6</td>
  </tr>
  <tr class="row">
    <td>Row 7</td>
  </tr>
  <tr class="row">
    <td>Row 8</td>
  </tr>
</table>

edited May 04 '21 at 10:49

Daweed

1,419
1
9
24

asked May 04 '21 at 09:48

MojoDK

4,410
10
42
80

Wrap each group in a
– oluwakayode May 04 '21 at 09:52
You refer this question ( https://stackoverflow.com/questions/359821/styling-the-last-td-in-a-table-with-css ) – Gajanan May 04 '21 at 09:54
@Gajanan Let me know how does it help. – m4n0 May 04 '21 at 09:56
Please re-open, this can be solved by slightly altering HTML, without having to look up previous siblings – T J May 04 '21 at 10:51

How can I apply style to each last rows before specific class in a table?

0 Answers0