[解決済み】子要素に応じて要素にCSSスタイルを適用する【重複あり

質問

ある要素にCSSスタイルを定義して、マッチする要素が特定の要素を（直接の子要素として）含んでいる場合にのみ適用させることは可能でしょうか？

これは、例を使って説明するのが一番だと思います。

備考 : 試しているのは 親要素のスタイル どのような子要素を含むかに応じて

<style>
  /* note this is invalid syntax. I'm using the non-existing
   ":containing" pseudo-class to show what I want to achieve. */
  div:containing div.a { border: solid 3px red; }
  div:containing div.b { border: solid 3px blue; }
</style>

<!-- the following div should have a red border because
     if contains a div with class="a" -->
<div>
  <div class="a"></div>
</div>

<!-- the following div should have a blue border -->
<div>
  <div class="b"></div>
</div>

注2 : javascriptを使えば実現できることは分かっているのですが、（私にとって）未知のCSSの機能を使って実現できないかと思っただけです。

どのように解決するのですか？

私の知る限り、子要素に応じた親要素のスタイル付けは、CSSの機能として利用できません。スクリプトで対応する必要がありそうです。

のようなことができたら素晴らしいですね。 div[div.a] または div:containing[div.a] ということですが、これは無理です。

を見ることを検討してみてはいかがでしょうか。 jQuery . そのセレクタは「含む」タイプで非常によく機能します。div を選択し、その子コンテンツに基づいて、親に CSS クラスを適用することが一度に行えます。

jQueryを使用する場合は、以下のようなものが使えるかもしれません（未検証ですが、理論はあります）。

$('div:has(div.a)').css('border', '1px solid red');

または

$('div:has(div.a)').addClass('redBorder');

をCSSクラスと組み合わせて使用します。

.redBorder
{
    border: 1px solid red;
}

以下は jQuery "has"セレクター .