CSS 内の特定の子要素の存在に基づいて親要素のスタイルを設定するにはどうすればよいですか?

CSS で子がある場合に親要素にスタイルを適用する

CSS では、子要素の存在に基づいて親要素のスタイルを設定できます。 has() セレクターを使用して実現します。

クラス「sub」の子が含まれている場合に親にスタイルを適用するには、次の CSS ルールを使用します:

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

たとえば、次の HTML:

<ul class="main">
  <li>Parent 1</li>
  <li>Parent 2</li>
  <li>Parent 3 with Child
    <ul class="sub">
      <li>Child of Parent 3</li>
    </ul>
  </li>
  <li>Parent 4</li>
</ul>

と次の CSS:

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

出力「親 3 と子」が水色で表示され、親 (li) にそのクラスの子がいることを示します。 "sub."

質問の提案された回答で言及されている $ セレクターは、CSS4 ではまだ標準化されていないことに注意してください。代わりに、 has() セレクターがこの機能を実現する方法としてサポートされています。

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