CSS を使用して、子要素に基づいて親要素のスタイルを設定するにはどうすればよいですか?

CSS を使用して子がある場合に親にスタイルを適用する

Web 開発者として、スタイルを適用する必要がある状況に遭遇することがあります。特定の子要素の存在に基づく親要素。これは簡単な作業のように思えるかもしれませんが、CSS だけでこれを達成するのは困難な場合があります。

幸いなことに、CSS にはこれを達成するのに役立つセレクターが用意されています。

has() Selector :

has() セレクターを使用すると、特定の子要素を含む要素を選択できます。たとえば、親にスタイルを適用するには

子要素がある場合は

要素クラス「sub」を持つ要素では、次の CSS を使用できます:

ul li:has(ul.sub) {
  /* Your styles here */
}

例:

次の HTML 構造を考えてみましょう:

<ul class="main">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul class="sub">
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
      <li>Sub Item 3</li>
    </ul>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

has() セレクターを使用すると、すべての

に青色の背景を適用できます。

の下の要素子
を持つクラス "main" を使用します。クラス "sub" の要素:

ul.main li:has(ul.sub) {
  background-color: blue;
}

注: has() セレクターは、すべてのブラウザーでサポートされているわけではありません。より広範なブラウザのサポートが必要な場合は、代わりに JavaScript ソリューションの使用を検討してください。

以上がCSS を使用して、子要素に基づいて親要素のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。