親要素のホバーで子要素のスタイルを制御する方法

問題

サイドバーナビゲーションを作成する際に、親要素全体にホバーしたときに、複数の子要素のスタイルを同時に変更したいという要件があります。元のコードでは、各子要素に個別にホバースタイルが設定されているため、ユーザーが各要素を個別にホバーする必要があり、UX的に最適ではありません。

解決策

Tailwind CSSには、親要素の状態に基づいて子要素のスタイルを制御するための強力な機能がいくつか提供されています。

1. groupとgroup-hover（TailwindCSS v2.0以降）

最も一般的で広くサポートされている方法です。親要素にgroupクラスを追加し、子要素ではhover:の代わりにgroup-hover:を使用します。

<a href="/dashboard" class="group">
  <div class="flex flex-row space-x-8 w-72 text-lg pb-3 text-gray-200">
    
    <div class="h-8 w-8 rounded transform -translate-x-7 group-hover:bg-green-300"></div>

    <div class="flex flex-row items-center space-x-8 transform -translate-x-10 -translate-y-1">
      <i class="bi bi-columns-gap group-hover:text-green-300 transform translate-x-1"></i>
      <h2 class="group-hover:font-semibold group-hover:text-green-300 transform translate-y-1 text-base">Dashboard</h2>
    </div>
  </div>
</a>

TIP

groupとgroup-hoverはTailwindCSS v2.0で導入され、現在のv4.xでも完全にサポートされています。ほとんどのプロパティで使用可能ですが、一部のプロパティではコアプラグインの拡張が必要な場合があります。

2. in-* バリアント（TailwindCSS v4.0以降）

v4.0で導入された新しいアプローチで、親要素を明示的に指定できます。親要素にクラスを追加する必要がなく、より正確な対象指定が可能です。

<a href="#" class="block border-2 w-md">
  <div class="flex gap-4 items-center p-4 text-gray-500"> 
    <div class="h-8 w-1 in-[a:hover]:bg-green-300"></div>
    <h2 class="in-[a:hover]:text-green-300">Dashboard</h2>
    <p class="hidden in-[a:hover]:block">(in-hovered)</p>
  </div>
</a>

3. 任意バリアント（TailwindCSS v3.1以降）

任意のCSSセレクターを使用して、親要素から子要素を直接参照する方法です。

<a
  href="#"
  class="
    block border-2 w-md
    hover:[&_div.h-8]:bg-green-300
    hover:[&_h2]:text-green-300
    hover:[&_p.hidden]:block
  "
>
  <div class="flex gap-4 items-center p-4 text-gray-500"> 
    <div class="h-8 w-1"></div>
    <h2>Dashboard</h2>
    <p class="hidden">(block by a:href:hover)</p>
  </div>
</a>

実践的な例

実際のナビゲーションコンポーネントに適用した例：

<nav class="w-64 bg-gray-800 p-4">
  <a href="/dashboard" class="group block py-3 px-4 rounded-lg hover:bg-gray-700 transition-colors">
    <div class="flex items-center space-x-3">
      <div class="w-1 h-8 rounded-full bg-transparent group-hover:bg-green-300 transition-colors"></div>
      <i class="bi bi-columns-gap text-gray-400 group-hover:text-green-300 transition-colors"></i>
      <span class="text-gray-200 group-hover:text-green-300 group-hover:font-semibold transition-all">Dashboard</span>
    </div>
  </a>
  
  <!-- 他のナビゲーション項目も同様に -->
</nav>

推奨アプローチ

INFO

推奨する方法: ほとんどの場合、groupとgroup-hoverの組み合わせを使用することが最適です。これは以下の理由からです：

• 広くサポートされており、ドキュメントが豊富
• 直感的で理解しやすい構文
• パフォーマンスに優れる

注意点

WARNING

group-hoverを使用する際は、必ず親要素にgroupクラスを追加することを忘れないでください。これがないとスタイルは適用されません。

DANGER

TailwindCSSのバージョンによって利用可能な機能が異なります。プロジェクトのTailwindCSSバージョンを確認し、適切な方法を選択してください。

まとめ

親要素のホバー状態で子要素のスタイルを一括変更するには、TailwindCSSの状態ベースのユーティリティを活用するのが効果的です。プロジェクトの要件やTailwindCSSのバージョンに応じて、group/group-hover、in-*バリアント、任意バリアントの中から最適な方法を選択してください。