Color table columns from N onwards (td:nth-of-type)

Question

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...

Answer 1

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>