css - 親に特定の子が含まれている場合、親のスタイルを設定するにはどうすればよいですか？

Question

私はこのように見えるいくつかのhtmlを持っています：

<div id="parent">
  <div id="child"></div>
</div>

#parentが含まれている場合を除いて、デフォルトの背景色を適用したいと思います#child。

したがって、CSSは次のようになります。

#parent {
  background: red
}
#parent:contains(#child) {
  background: none
}

ただし、:contains疑似セレクターをそのように機能させることはできません。これを達成する方法はありますか？

Answer 1

:contains()特定の他の要素を含む要素ではなく、特定のテキストを含む要素に一致することのみを目的としていました。ブラウザの実装がほとんどなく:contains()、仕様から削除されることになったのは、テキストによる要素の照合に関連する複雑さのためです。

CSSには親セレクターがなく、:has()（要素を参照する）jQueryにのみ存在するため、CSSではまだこれを実現できません。

記録のために、jQueryも実装:contains()しますが、古い仕様に従って実装するため、:has()代わりに要素の名前を使用します。

Answer 2

jqueryを使用

if($("#child").length>0) $("#parent").css("backgroundColor","#fff");

純粋なCSSでは不可能です。