css selector for table row in variable length table

Question

I have a table similar to this example

<tr class="line">...</tr>
<tr class="line">...</tr>
<tr class="line">...</tr>
<tr class="sum-line" id="i-know-this-one">...</tr>
<tr class="sum-line">...</tr>
<tr class="sum-line">...</tr>

With css (no jquery), how do I select the last .line? that is, the last tr before the #i-know-this-one.

Keep in mind that amount of rows before after #i-know-this-one will vary in my context, so we cannot simply count nth-child from top or bottom of the table

You must to use javascript. With pure CSS you can't. Wait, you can if you change your html structure, but it's hardest than use javascript. — Marcos Pérez Gude, Nov 24 '15 at 14:40

murrometz · Answer 1 · 2015-11-24T15:03:35.390

If you use php or other language to output your table, then add a class or id to the last tr.line. And then apply styles to it.

Or use this, if it's applicable for your problem.

tr:nth-last-child(3) {
  background-color: lime;
}

<table>
  <tr class="line"><td>...</td></tr>
  <tr class="line"><td>...</td></tr>
  <tr class="line"><td>...</td></tr>
  <tr class="sum-line" id="i-know-this-one"><td>...</td></tr>
  <tr class="sum-line"><td>...</td></tr>
  <tr class="sum-line"><td>...</td></tr>
</table>

Or another way: Use tbody for .line and tfoot for .sum-line. There will not be any problems then.

   tbody tr:last-child {
      background-color: lime;
    }

    <table>
      <tbody>
        <tr class="line"><td>...</td></tr>
        <tr class="line"><td>...</td></tr>
        <tr class="line"><td>...</td></tr>
      </tbody>
      <tfoot>
        <tr class="sum-line" id="i-know-this-one"><td>...</td></tr>
        <tr class="sum-line"><td>...</td></tr>
        <tr class="sum-line"><td>...</td></tr>
      </tfoot>
    </table>

css selector for table row in variable length table

1 Answers1