How to select the last rowspan in a table?

Question

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!

Possible duplicate of [CSS: How to say .class:last-of-type \[classes, not elements!\]](http://stackoverflow.com/questions/13211453/css-how-to-say-classlast-of-type-classes-not-elements) — moonwave99, Jan 17 '16 at 22:40
Still not possible to achieve without editing the html. But since I'm generating the table in the backend in groups, I can easily add in the ``tbody`` tag. Therefore the solution provided by Pangloss below is an acceptable solution that's still cleaner than the workaround I would have done. Thanks everyone! — phX, Jan 17 '16 at 22:58

Stickers · Accepted Answer · 2016-01-17T23:18:31.167

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>

score 0 · Answer 2 · answered May 14 '16 at 16:53

If you don't want to add more <tbody>s, you could always just put a class on the last rowspan-ed table cell, like:

.myTable .lastRowspannedCell {
    color: red;
}

<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' class='lastRowspannedCell'>HEADER2</td>
    </tr>
    <tr>
        <td>something2</td>
    </tr>
    <tr>
        <td>something2</td>
    </tr>
</table>

I don't know the structure of your back-end code, so that's assuming you can know up-front if a group is the last group.

As a bonus, not using the :last-of-type/:last-child selector nets you better IE8 compatibility, if you care about that.

How to select the last rowspan in a table?

2 Answers2