My table element is generated dynamically by Angular, with rows that change based on data. The layout of the page is as follows:
<table class="myDataGrid">
<thead>
<tr>
<th>In Service</th>
....
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data" ng-class="{'offline': item.InService}">
<td>{{item.InService}}</td>
...
</tr>
</tbody>
</table>
Even though I have defined CSS selectors to set row background colors alternately, the "offline" class does not apply as expected:
.myDataGrid tbody tr
{
background-color:black;
}
.myDataGrid tbody tr:nth-child(2n + 1)
{
background-color:gray;
}
The issue arises when trying to style the "offline" class separately from the existing classes:
.offline
{
background-color: darkred;
}
To address this problem, I attempted to enhance specificity:
.myDataGrid .offline
{
background-color: darkred;
}
While it worked for the black rows, the gray ones remained unaffected.
The query then becomes: how can I target the gray rows specifically? Attempts with different selectors such as:
.myDataGrid .offline tbody tr:nth-child(2n + 1)
And
.myDataGrid tbody tr:nth-child(2n + 1) .offline
Did not yield desired results or appear in the inspector tree.