Using Tailwind CSS to change the style of a parent div in response to the selected state of a radio button

Question

I have a table with multiple columns and a radio button per row. I need to change the background color of the entire row when I select a specific button. Can this be achieved?

<tr class="flex items-center p-4 space-x-4 border hover:bg-indigo-50">
<input type="radio" name="user" id="{{ user.id }}">
<label for="{{ user.id }}">{{ user.email }}</label>
<div>{{ user.name }}</div>
</tr>

In Tailwind, you can use the "peer" class to style adjacent blocks. But I need to style the parent block (when the is selected, the background color of the parent block should change).

Answer 1

You can use the pseudo-class :has(), but its support in browsers is limited (for example: Mozilla does not support it). You can check the browser support of this selector.

tr:has(input:checked){
    background: green;
}

<script src="http://cdn.tailwindcss.com"></script>

<table>
    <tr class="flex items-center p-4 space-x-4 border hover:bg-indigo-50">
        <td>
            <input type="radio" name="user" id="{{ user.id }}">
            <label for="{{ user.id }}">{{ user.email }}</label>
            <div>{{ user.name }}</div>
        </td>
    </tr>
</table>