How to select the last rowspan in a table?

phx Published at Dev

phX

I have a table with some <td>s, and a couple of them have rowspan attribute. I'm trying to select the very last one in the table, neither last-child nor last-of-type works.

Here is a jsfiddle: https://jsfiddle.net/p2cjwvj5/

<table class='myTable' border='1'>
    <tr>
        <td rowspan='3'>HEADER</td>
    </tr>
    <tr>
        <td>something</td>
    </tr>
    <tr>
        <td>something</td>
    </tr>
    <tr>
        <td rowspan='3'>HEADER2</td>
    </tr>
    <tr>
        <td>something2</td>
    </tr>
    <tr>
        <td>something2</td>
    </tr>
</table>

.myTable [rowspan]:last-of-type {
    color: red;
}

I'm trying to to select the cell that contains "HEADER2".

Is this possible? I know I can work around it by tagging the last rowspan with another class, just wonder if there is a cleaner method. Thanks!

Stickers

You can wrap each group of <tr>s into a <tbody>, then select the last tbody by either using :last-of-type or :last-child would be fine.

.myTable tbody:last-of-type td[rowspan] {
  color: red;
}

<table class='myTable' border='1'>
  <tbody>
    <tr>
      <td rowspan='3'>HEADER</td>
    </tr>
    <tr>
      <td>something</td>
    </tr>
    <tr>
      <td>something</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan='3'>HEADER2</td>
    </tr>
    <tr>
      <td>something2</td>
    </tr>
    <tr>
      <td>something2</td>
    </tr>
  </tbody>
</table>

Collected from the Internet

Please contact [email protected] to delete if infringement.