I am facing an issue where I need to add a shadow next to a set of fixed columns in order to indicate that there is content beneath them. These fixed columns are marked with the class dtfc-fixed-left which is assigned by the FixedColumns library within DataTables. The number of fixed columns can vary from 0 to 2, depending on the configuration set using the datatables colvis functionality.
The table structure is as follows:
<table>
<thead>
<tr>
<th class="dtfc-fixed-left">Column 1</th>
<th class="dtfc-fixed-left">Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dtfc-fixed-left">test data 1</td>
<td class="dtfc-fixed-left">test data 2</td>
<td>test data 3</td>
</tr>
<tr>
<td class="dtfc-fixed-left">test data 4</td>
<td class="dtfc-fixed-left">test data 5</td>
<td>test data 6</td>
</tr>
<tr>
<td class="dtfc-fixed-left">test data 7</td>
<td class="dtfc-fixed-left">test data 8</td>
<td>test data 9</td>
</tr>
</tbody>
</table>
I have attempted to target the last occurrence of the dtfc-fixed-left class within each <tr> using the following CSS code:
td.dtfc-fixed-left:last-child {
background: red !important;
}
Unfortunately, this did not produce the desired result. While I prefer not to hardcode styling logic with JS, I am willing to do so if no other solution is feasible.
If possible, I am looking for a selector that consistently identifies the last instance of the class dtfc-fixed-left within each <tr>.