This snippet is from a table created using Bootstrap:
<div class="table-responsive">
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td align="center">
<div><span class="approve"></span></div>
</td>
</tr>
</tbody>
</table>
</div>
I am trying to change the background-color of the entire row when it contains a span with the class .approve.
Here is my attempted CSS code:
.table-striped > tbody > tr:nth-child(2n+1):has(span):has(.approve) > td {
background-color: #fff3c0;
}
.table-striped > tbody > tr:nth-child(2n):has(span):has(.approve) > td {
background-color: #fff8d9;
}
Unfortunately, this approach is not working. I also tried removing .table-striped and using the following CSS:
.table > tbody > tr:has(span):has(.approve) > td {
background-color: #fff8d9;
}
However, this did not work either. Am I missing something in my CSS?