子要素に応じて要素にCSSスタイルを適用する


203

要素の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機能を使用して可能かどうか疑問に思いました。


1
質問を更新して、おそらく点滅している太字のテキストを使用して、親ではなく親のdivをスタイルしようとしていることを示すことができます。情報自体が問題に含まれていることは知っていますが、大量の不正解を取得したくない場合を除いて、努力する価値はあります。
Seth Petry-Johnson、

@Sethに感謝します。質問のタイトルとテキストを改善してみました。それでも不明な点がある場合は、質問を編集してください。
M4N 2010


これは、CSSでのこのタイプのサポートが理想的である理由の完璧な例です。ol < li:nth-child(n+10) { margin-left: 2rem; } ol < li:nth-child(n+100) { margin-left: 3rem; } ol < li:nth-child(n+1000) { margin-left: 4rem; }理想的な世界では、これにより、含まれる子olの数に依存するマージンが増加liし、左側のマージンがそれと同じ幅になるだけです。する必要がありました。
Jonmark Weber

回答:


124

私の知る限りでは、子要素に基づいて親要素にスタイルを設定することは、CSSの利用可能な機能ではありません。これにはおそらくスクリプトが必要です。

あなたが何かを行うことができればそれは素晴らしいことだろうdiv[div.a]か、div:containing[div.a]あなたが言ったように、これは不可能です。

jQueryを検討することを検討してください。そのセレクターは、「包含」タイプと非常によく機能します。子のコンテンツに基づいてdivを選択し、CSSクラスを親にすべて1行で適用できます。

jQueryを使用する場合、これに沿って何かが機能する可能性があります(テストされていませんが、理論はそこにあります)。

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

または

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

CSSクラスと組み合わせる:

.redBorder
{
    border: 1px solid red;
}

jQueryの「has」セレクターのドキュメントは次のとおりです。


15
補足:パフォーマンスを向上させるために、:hasセレクターのjQueryドキュメントページでは、.has()メソッド(api.jquery.com/has)を使用することを推奨しています=>たとえば、現在の質問に適用$('div').has('div.a').css('border', '1px solid red');
Frosty Z

これが機能するためには、突然変異オブザーバーを使用して、子がその状態を変更したかどうかを確認する必要があります...
Legends

これは、「CSSでこれを行う方法はあるのか」という質問には本当に答えません。「JavaScriptを使用してこれを実現できることはわかっていますが、(私には)不明なCSS機能を使用してこれが可能かどうか疑問に思いました。」
SunshinyDoyle

developer.mozilla.org/en-US/docs/Web/CSS/:has、この:hasセレクターは機能すると思いますが、ドラフトバージョンであり、ブラウザーがサポートしていません。
AliF50

62

基本的にはありません。以下はなりますが、理論的には後にしたものになら:

div.a < div { border: solid 3px red; }

残念ながら存在しません。

「なぜ地獄ではないのか」という説に沿って、いくつかの論評があります。Shaun Inmanによる肉付けの良いものはかなり良いです:

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors


34
ちょうど8年後の更新:このセレクターメソッドはまだサポートされていません。
Kraang Prime 2018

1
この機能のドラフトは:has()疑似クラスの形式であり、CSS4でのみ使用できます。現在(2019年後半)の時点では、JSがこの機能を実現する唯一の方法です。
zepp.lee

これはCSSスタイルを有効にしないと思いますが、セレクターを使用するにはJavaScriptが必要です。これが変わっていない限り?
Justin Wignall

3
9年後、この機能は必要ないと思いますか?
Loi Nguyen Huynh

1

@kpの答えの上に:

私はこれに対処しており、私の場合、子要素を表示し、それに応じて親オブジェクトの高さを修正する必要があります(デバッグする時間がないため、ブートストラップヘッダーで自動サイズ設定が機能していません) 。

しかし、JavaScriptを使用して親を変更する代わりに、CSSクラスを動的に親に追加し、それに応じてCSS選択的に子を表示すると思います。これにより、CSSの状態に基づいてではなく、ロジック内の決定が維持されます。

tl; dr; aおよびbスタイルを<div>子ではなく親に適用します(もちろん、誰もがこれを実行できるわけではありません。つまり、Angularコンポーネントが独自に決定を行います)。

<style>
  .parent            { height: 50px; }
  .parent div        { display: none; }
  .with-children     { height: 100px; }
  .with-children div { display: block; }
</style>

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

<script>
  // to show the children
  $('.parent').addClass('with-children');
</script>

0

私の場合、DataTablesで動的にレンダリングされているテーブルの入力チェックボックスを含む要素のセルパディングを変更する必要がありました。

<td class="dt-center">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

initComplete関数内に次の行コードを実装した後、正しいパディングを生成することができました。これにより、行が異常に高い高さで表示されないように修正されました

 $('tbody td:has(input.a)').css('padding', '0px');

これで、正しいスタイルが親要素に適用されていることがわかります。

<td class=" dt-center" style="padding: 0px;">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

基本的に、この回答は@KPの回答を拡張したものですが、これを実装するコラボレーションが多ければ多いほどよいでしょう。要約すると、それが機能するので、これが他の誰かの助けになることを願っています!最後に、正しい方向に導いてくださった@KPに感謝します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.