Home/ Questions/Q 9170081
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T15:58:03+00:00

I want to add a certain background color from a certain column onwards. Instead

  • 0

I want to add a certain background color from a certain column onwards. Instead of having to use a css class for each column, i would rather prefer to do it otherwise if possible.

I will have a huge table with hundreds of rows and around 25 columns and I prefer to avoid unnecessary code.

Currently, I am using td:nth-of-type property to do it:

.demo tr.selectedRow td:nth-of-type(9),
.demo tr.selectedRow td:nth-of-type(10),
.demo tr.selectedRow td:nth-of-type(11),
.demo tr.selectedRow td:nth-of-type(12),
.demo tr.selectedRow td:nth-of-type(13),
.demo tr.selectedRow td:nth-of-type(14),
.demo tr.selectedRow td:nth-of-type(15),
.demo tr.selectedRow td:nth-of-type(16) {
  background-color: #fff16b;
}
<table border="1" class="demo">
  <tr>
    <td>not selected</td>
  </tr>
  <tr class="selectedRow">
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
</table>

I was wondering if there’s any way to reduce this even more.

The documentation doesn’t say much more…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://css-tricks.com/examples/nth-child-tester/ This tester can really help. It looks like you want to select everything after 9 so use the code below

    Select every TD except The First 8

    .demo tr.selectedRow td:nth-child(n+9) {
  color: red;
}
    <table border="1" class="demo">
  <tr>
    <td>not selected</td>
  </tr>
  <tr class="selectedRow">
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>not selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
    <td>selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
  <tr>
    <td>not selected</td>
  </tr>
</table>
    • 0