Menggunakan CSS Tailwind untuk menukar gaya div induk sebagai tindak balas kepada keadaan butang radio yang dipilih

Question

Saya mempunyai jadual dengan berbilang lajur dan butang radio bagi setiap baris. Saya perlu menukar warna latar belakang keseluruhan baris apabila saya memilih butang tertentu. Bolehkah ini dicapai?

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

Dalam Tailwind, anda boleh menggunakan kelas "rakan sebaya" untuk menggayakan blok bersebelahan. Tetapi saya perlu menggayakan blok induk (apabila dipilih, warna latar belakang blok induk harus berubah).

Answer 1

Boleh menggunakan kelas pseudo :has(), tetapi ia mempunyai sokongan terhad dalam penyemak imbas (cth: tidak disokong oleh Mozilla). Anda boleh menyemak sokongan penyemak imbas untuk pemilih ini.

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>