CSS nth-child not returning quite what was expected

I am trying to create a table dynamically. And update the cell values accordingly. The values are returned asynchronously, therefore they can theoretically refer to any column. The number of columns can be different at any time depending on the situation but the number of rows for this section of the table is constant (7).

td {
  border: 1px solid black;
}

.dummyTable td.components:nth-child(5n+2) {
    color: red;
}
<table class="dummyTable" style="display: table;">

<tbody>
<tr>

<th style="background-color:#898b8c; color:white">A</th>
<th style="background-color:#898b8c; color:white">B</th>
<th style="background-color:#898b8c; color:white">C</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">37</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">38</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">36</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">39</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">40</th>
</tr>

<tr>
      <td rowspan="3">A</td>
      <td>B</td>
      <td>C</td>

      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #fff082 ">1</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
</tr>

<tr>
      <td>B</td>
      <td>C</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
</tr>
<tr>
      <td></td>
      <td style="background-color:#d5e7ed;">Total</td>
      <td id="37" style="background-color:#d5e7ed">0</td>
      <td id="38" style="background-color:#d5e7ed">1</td>
      <td id="36" style="background-color:#d5e7ed">0</td>
      <td id="39" style="background-color:#d5e7ed">0</td>
      <td id="40" style="background-color:#d5e7ed">0</td>
</tr>

<tr>
      <td rowspan="7">S</td>
      <td rowspan="7">E</td>

      <td>s1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">2</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
</tr>
<tr>
      <td>s2</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
</tr>
<tr>
      <td>s3</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">3</td>
      <td class="components" style="background-color:#fff082">3</td>
      <td class="components" style="background-color:#fff082">4</td>
</tr>
    <tr>
      <td>s4</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
    <tr>
      <td>s5</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
    <tr>
      <td>s6</td>

      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
    <tr>
      <td>s7</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
  </tbody>
</table>

I am trying to update a column at a time with nth child. My thinking was that all I need to know is how many columns there are in the table and which column I am dealing with at the time.

For example if there were 5 columns, n would be 5 I think then the constant would modify which column I'm talking about.

i.e. 5n+1 should update column 1 of a 5 columned table. And 3n+2 should modify column 2 of a 3 columned table.

The columns I'm referring to are the ones with a class "components".

The problems I think I am running into is I'm not sure how the "components" cells are indexed. i.e. Whether they go row by row or column by column.

I am thinking kind of in terms of nth term formulas in maths:

So if a formula was 5n+0 in this case:

I am imagining the first highlighted cell would be 5: 5(1) + 0 = 5 Then the next highlighted cell index would be 10: 5(2) + 0 = 10

I am also unsure if they start at a zero index or 1.

This process is working for me for every row but the first one. But when I'm testing in the snippet it doesn't seem to move exactly how I would've expected.

(Note) I have modified the example to take a section of the original returned table and the code is in CSS rather than jQuery and instead of modifying the value I am changing the colour here. This was for simplicity because I don't think this will affect the logic.

1 answer

  • answered 2018-01-15 15:29 TylerH

    It's not working as you expected for the first row after "Total" because that row has seven columns in it. td.components:nth-child(5n+2) will only apply its styles to the 2nd child (if that child matches td.components) and then every 5th child after that 2nd one, providing that every 5th child also matches td.components.

    However, it will still count other children. In your first row, you have the two rowspan="7" columns. So it counts those two, doesn't apply the styles to the 2nd column because it does not have a class of .components, and then counts 5 columns over, and applies styles to that column, because it does have the class .components.

    In following rows, at least in the markup, there are only 6 columns each, so the 2nd column of each row gets the styles applied due to the 2nd column in each of those rows having the class .components.

    So if you want those first two columns to not be counted you will need to put them in their own row or use some different logic, like integrating a :not() selector or something.

    Alternatively if you want to use jQuery to apply these styles you can do so, just tell the loop to ignore the first row after the Total row and apply specific styles to that one.