Utilisation de Tailwind CSS pour modifier le style d'un div parent en réponse à l'état sélectionné d'un bouton radio

Question

J'ai un tableau avec plusieurs colonnes et un bouton radio par ligne. Je dois changer la couleur d'arrière-plan de toute la ligne lorsque je sélectionne un bouton spécifique. Est-ce réalisable ?

<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>

Dans Tailwind, vous pouvez utiliser la classe "peer" pour styliser les blocs adjacents. Mais je dois styliser le bloc parent (lorsque est sélectionné, la couleur d'arrière-plan du bloc parent doit changer).

Answer 1

Il est possible d'utiliser des pseudo-classes :has(), mais leur support est limité dans les navigateurs (ex : non supporté par Mozilla). Vous pouvez consulter le support du navigateur pour ce sélecteur.

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>