Tailwind CSS を使用して、ラジオ ボタンの選択状態に応じて親 div のスタイルを変更する

Question

複数の列と行ごとにラジオ ボタンがあるテーブルがあります。特定のボタンを選択したときに行全体の背景色を変更する必要があります。これは達成できるでしょうか？

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

Tailwind では、「peer」クラスを使用して隣接するブロックのスタイルを設定できます。ただし、親ブロックのスタイルを設定する必要があります ( が選択されている場合、親ブロックの背景色が変更されるはずです)。

Answer 1

疑似クラス :has() を使用できますが、ブラウザでのサポートは制限されています (たとえば、Mozilla はサポートしません)。このセレクターの ブラウザ サポート を確認できます。

リーリー リーリー