CSS select bootstrap table row which has certain class

Question

This is part of my bootstrap table:

<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 want to change the background-color of the whole row when it contains span with class .approve

This is what I tried:

.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 it doesn't work. I also tried to remove .table-striped and use this CSS:

.table > tbody > tr:has(span):has(.approve) > td {
   background-color: #fff8d9;
}

It doesnt work either. Is my CSS wrong?

Answer 1

You can achieve this with:

table tbody tr:has(span.approve) {
  background-color: #fff8d9;
}

or

table tbody tr:has(span.approve) td {
  background-color: #fff8d9;
}

if you want to add background color to td elements instead of tr.

Worth noticing is that :has() pseudo-element is quite new and it is not fully supported by all browsers yet (for example it is not supported by Firefox).