CSS を使用して、子要素に基づいて親要素のスタイルを設定するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-11-24 06:08:18

オリジナル

899 人が閲覧しました

How Can I Style a Parent Element Based on its Child Elements Using 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 サイトの他の関連記事を参照してください。