web-dev-qa-db-ja.com

CSSの親セレクタはありますか？

アンカー要素の直接の親である<li>要素を選択する方法

たとえば、私のCSSは次のようになります。

li < a.active {
    property: value;
}

JavaScriptでこれを実行する方法は明らかにありますが、CSS Level 2にネイティブで存在するある種の回避策があることを私は望んでいます。

私がスタイルを作ろうとしているメニューはCMSによって吐き出されているので、アクティブな要素を<li>要素に移動することはできません...（私がしたくないメニュー作成モジュールをテーマにしない限り）。

何か案は？

csscss-selectors
2800
jcuenod

現在CSSでは要素の親を選択する方法はありません。

それをする方法があったら、それは現在のCSSセレクター仕様のどちらかにあるでしょう：

それまでは、親要素を選択する必要がある場合はJavaScriptを使用する必要があります。

セレクタレベル4ワーキングドラフト には、 jQuery実装 と同じように動作する:has()疑似クラスが含まれています。 2019年現在、これはどのブラウザでもまだサポートされていません。

:has()を使うと、元の質問はこれで解決できます。

li:has(> a.active) { /* styles to apply to the li tag */ }
2253
Dan Herbert

私はあなたがCSSでのみ親を選択できるとは思わない。

しかし、すでに.activeクラスがあるように思われるので、そのクラスを（liではなく）aに移動する方が簡単ではないでしょうか。こうすることで、liとaの両方にcssからのみアクセスできます。

143
jeroen

この script を使うことができます。

*! > input[type=text] { background: #000; }

これはテキスト入力の親を選択します。しかし、まだまだあります。必要に応じて、指定した親を選択できます。

.input-wrap! > input[type=text] { background: #000; }

またはアクティブなときに選択します。

.input-wrap! > input[type=text]:focus { background: #000; }

このHTMLをチェックしてください。

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

inputがアクティブなときにspan.helpを選択して表示できます

.input-wrap! .help > input[type=text]:focus { display: block; }

もっとたくさんの機能があります。プラグインのドキュメントをチェックしてください。

ところで、それはIEで動作します。

116
Idered

他のカップルが述べたように、CSSだけを使って要素の親をスタイルする方法はありませんが、以下は jQuery で動作します。

$("a.active").parents('li').css("property", "value");
94
zcrar70

親セレクタはありません。前の兄弟セレクターが存在しないのと同じ方法です。これらのセレクタを持たないことの1つの正当な理由は、クラスが適用されるべきかどうかを判断するためにブラウザが要素のすべての子を通過しなければならないためです。例えば、あなたが書いたなら：

body:contains-selector(a.active) { background: red; }

その後、ブラウザは</body>までのすべてをロードして解析するまで待機して、ページを赤にするかどうかを決定する必要があります。

この記事 なぜ親セレクタがないのか 詳細に説明します。

60
Salman A

css2にこれを行う方法はありません。あなたはクラスをliに追加してaを参照することができます。

li.active > a {
    property: value;
}
49
Josh

aをblock displayに切り替えてから、必要なスタイルを使用してください。 a要素はli要素を埋め、あなたは望むように見た目を変更することができます。 liパディングを0に設定することを忘れないでください。

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}
33
Raseko

CSSセレクター“ General Sibling Combinator ”はあなたが望むものに使うことができます。

E ~ F {
    property: value;
}

これは、F要素が先行するすべてのE要素に一致します。

32
cobaasta

はい： :has()

ブラウザのサポート： なし

32
Yukulélé

私の知る限りではCSS 2にはありません。 CSS 3にはより堅牢なセレクタがありますが、すべてのブラウザにわたって一貫して実装されているわけではありません。改良されたセレクターを使っても、それがあなたがあなたの例で指定したことを正確に達成するとは思わない。

25
Mark Hurd

私はOPがCSSソリューションを探していたことを知っていますが、jQueryを使って達成するのは簡単です。私の場合は、子の<ul>に含まれる<span>タグの<li>親タグを見つける必要がありました。 jQueryには:hasセレクターがあるので、それに含まれる子によって親を識別することが可能です。

$("ul:has(#someId)")

id someId の子要素を持つul要素を選択します。または元の質問に答えるには、次のような方法でトリックを実行します（未テスト）。

$("li:has(.active)")
23
David Clarke

これが Selectorレベル4 仕様の最も議論されている側面です。このセレクターでは、与えられたセレクターの後に感嘆符を使用することによって、その子に従って要素をスタイルすることができます（！）。

例えば：

body! a:hover{
   background: red;
}

ユーザーがアンカーの上にカーソルを置くと、赤い背景色が設定されます。

しかし、ブラウザの実装を待つ必要があります:(

20
Marconi

ハイパーリンクを親として使用してから、ホバー時に内部要素を変更することもできます。このような：

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

この方法で、親要素のロールオーバーに基づいて、複数の内部タグのスタイルを変更できます。

19
riverstorm

子孫にフォーカスがある場合は、擬似要素:focus-withinを使用して親を選択できます。

要素がtabindex属性を持っていれば、その要素にフォーカスを合わせることができます。

フォーカスインのブラウザサポート

タブインデックス

例 

.click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
}
<div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div>
16
sol

誰かがこのような何かを提案しましたか？水平メニューのためだけのアイデア...

hTMLの一部

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

cSSの一部

/* hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

更新されたデモと残りのコード

他の例 テキスト入力での使い方 - 親フィールドセットの選択

13
Ilya B.

現時点では、親セレクタはありません。また、W3Cのどの講演でも議論されていません。ブラウザがCSSをどのように評価するのかを理解して、必要かどうかを実際に理解する必要があります。

ここには技術的な説明がたくさんあります。

Jonathan SnookがCSSの評価方法を説明します 。

親セレクタの話についてのChris Coyier 。

ハリーロバーツは再び効率的なCSSセレクタを書くことについて 。

しかし Nicole Sullivanには、前向きな傾向について興味深い事実がいくつかあります 。

これらの人々はすべてフロントエンド開発の分野でトップクラスです。

13
Suraj Naik

Webサイトを設計するときに本当に役立つことができるいくつかの非標準機能を含むようにCSSを拡張するプラグインがあります。 _ eqcss _ と呼ばれます。

EQCSSが追加したものの1つは、親セレクタです。 IE 8以上のすべてのブラウザで動作します。形式は次のとおりです。

@element 'a.active' {
  $parent {
    background: red;
  }
}

そのため、ここではすべての要素a.activeに対して要素クエリを開きました。そのクエリ内のスタイルについては、$parentのようなものが参照ポイントがあるので意味があります。それはJavaScriptのparentNodeに非常に似ているので、ブラウザは親を見つけることができます。

これは$parentのデモです および IE8で動作する別の$parentのデモ および IE8を使用しない場合のスクリーンショット /.

EQCSSには、 meta-selector 選択された要素の前の要素の/ $prev、要素のクエリに一致する要素のみの$thisなども含まれます。

11
innovati

技術的には、これを行う直接的な方法はありませんが、jqueryまたはjavascriptを使用してそれを分類できます。

しかし、rこのようなこともできます。

a.active h1 {color:blue;}
a.active p {color: green;}

jQuery 

$("a.active").parents('li').css("property", "value");

もしあなたがjQueryを使ってこれを達成したいのであれば、これは jQuery親セレクタのリファレンスです

11
Prabhakar

W3Cは、ブラウザに大きなパフォーマンスの影響を与えるため、そのようなセレクタを除外しました。

9
rgb

簡単な答えは _ no _ です、CSSには現段階でparent selectorはありませんが、要素やクラスを交換する方法がない場合は、2番目の選択肢はJavaScriptを使用することです。

var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; //your property: value;
  }
});

アプリケーションで jQuery を使用している場合は、もっと簡単な方法です。

$('a.active').parents('li').css('color', 'red'); //your property: value;
7
Alireza

現時点では標準CSSには親セレクタはありませんが、私は ax （つまりAugmented CSS Selector Syntax/ACSSSS）という（個人的な）プロジェクトに取り組んでいます新しいセレクター、両方を含みます：

  1. 直接の親セレクタ<（これは>と逆の選択を可能にします）
  2. 任意の先祖セレクタ^（これは[SPACE]の反対の選択を可能にします）

ax は現在開発の比較的初期のベータ段階にあります。

こちらのデモを見てください。

http://rounin.co.uk/projects/axe/axe2.html

（左側の2つのリストと標準のセレクタのスタイルを比較し、右側の2つのリストとaxセレクタのスタイルを比較します）

5
Rounin

2019年になり、 CSS Nesting Moduleの最新ドラフト に実際に次のようなものがあります。 @nest at-rulesの紹介.

3.2。入れ子のルール：@nest

直接の入れ子は見栄えがいいですが、やや脆弱です。 .foo＆のようないくつかの有効なネストセレクタは許可されておらず、特定の方法でセレクタを編集するとルールが予期せず無効になる可能性があります。同様に、周囲の宣言と視覚的に区別するのがネスティングが難しいと感じる人もいます。

これらすべての問題を解決するために、この仕様では@nestルールを定義しています。これにより、スタイルルールを有効にネストする方法に対する制限が少なくなります。その構文は次のとおりです。

@nest = @nest <selector> { <declaration-list> }

@nestルールはスタイルルールと同じように機能します。これはセレクタで始まり、セレクタが一致する要素に適用される宣言を含みます。唯一の違いは、@ nestルールで使用されるセレクターはネストを含む必要があるということです。つまり、ネストセレクターがどこかに含まれています。個々の複雑なセレクタがすべて入れ子になっている場合、セレクタのリストは入れ子になります。

（上記のURLからコピーして貼り付けてください）。

この仕様の下で有効なセレクタの例：

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */
5
Roberrrt

これがhoverとpointer-eventsを使ったハックです。

<!doctype html>
<html>
        <head>
                <title></title>
                <style>
/* accessory */
.parent {
        width: 200px;
        height: 200px;
        background: gray;
}
.parent, 
.selector {
        display: flex;
        justify-content: center;
        align-items: center;
}
.selector {
        cursor: pointer;
        background: silver;
        width: 50%;
        height: 50%;
}
                </style>
                <style>
/* pertinent */
.parent {
        background: gray;
        pointer-events: none;
}
.parent:hover {
        background: Fuchsia;
}
.parent 
.selector {
        pointer-events: auto;
}
                </style>
        </head>
        <body>
                <div class="parent">
                        <div class="selector"></div>
                </div>
        </body>
</html>
4
Jan Kyu Peblik

いいえcssだけで親を選択することはできません。

しかし、すでに.activeクラスがあるように思われるので、そのクラスを（liではなく）aに移動する方が簡単ではないでしょうか。こうすることで、liとaの両方にcssからのみアクセスできます。

3
Gaurav Aggarwal

少なくともCSS3まではあなたはそのように選択することはできません。しかし、JSでは今日では非常に簡単に行うことができます。ほんの少しのVanilla JavaScriptを追加するだけで済みます。

      cells = document.querySelectorAll('div');
              [].forEach.call(cells, function (el) {
              //console.log(el.nodeName)
                if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
                console.log(el)};
            });
            <div>Peter</div>
            <div><a href="#">Jackson link</a></div>
            <div>Philip</div>
            <div><a href="#">Pullman link</a></div>
3
Eduard Florinescu

何か案は？

CSS 4は、hooksをwalking backwardsに追加すると、ファンシーになります。それまでは（notが望ましい）checkboxおよび/またはradioを使用することができますinputs to breakこれにより、CSSが通常の範囲外で動作できるようになります...

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old Microsoft opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* &#9660; - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* &#9660; - Down Arrow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* Microsoft!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
}
<!--
  This bit works, but will one day cause troubles,
  but truth is you can stick checkbox/radio inputs
  just about anywhere and then call them by id with
  a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-default">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-one">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

... pretty grossですが、CSSとHTMLだけで、bodyプロパティとidプロパティをリンクすることで、ほぼどこからでもforと:root以外をタッチおよび再タッチできます。 radio/checkboxinputsおよびlabeltriggers;おそらく、誰かがそれらをある時点で再タッチする方法を示すでしょう。

追加の注意点として、特定のinputのoneidのみを使用できます。最初にcheckbox/radiowins言い換えるとトグル状態... しかし =複数のラベルはすべて同じinputを指すことができますが、HTMLとCSSの両方がさらに粗雑に見えます。

... CSSレベル2にネイティブに存在する何らかの回避策があることを願っています...

他の:セレクターについてはわかりませんが、CSS 3以前の:checked。正しく覚えていれば、[checked]のようなものだったので、上記のコード、たとえば、

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

...しかし、::afterや:hoverのようなものについては、それらが最初に登場したCSSバージョンがまったくわかりません。

これはすべて、怒りさえもせずに本番環境で使用しないでください。冗談として、つまり何かcanを実行したからといって、必ずしもshouldを意味するとは限りません。

2
S0AndS0

SASSのアンパサンドで可能です：

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

CSSの出力：

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}
2
Rodolfo Jorge Nemer Nogueira

@資料

技術的には親セレクターではありませんが、を取得すると、ほぼ「親」であるページURLを選択できます。これを支持する必要があることに留意してください（詳細については、この投稿の下部を参照してください）。この方法がWeb作成者によって実行可能になったら、この投稿を更新します。

各ページのナビゲーションヘッダーのbackground-imageを変更するとします。 HTMLは一般的に次のようになります。

<body>

<main id="about_"></main>

<header><nav></nav></header>

</body>

id属性をheadおよびbody要素に追加することは専門的ではなく、Web 3.0に準拠していません。ただし、URLを選択することにより、何らかの意味でHTMLコードを追加する必要はありません。

@document url('https://www.example.com/about/')
{
 body > header
 {
  background-image: url(about.png);
 }
}

あなたはがプロだからです（あなたはそうですか？）あなたは常にライブサーバーにデプロイする前に、コードをローカルでテストします。そのため、静的URLはlocalhost、127.0.0.1、:1などで動作しません-デフォルトでは。これは、コードを正常にテストおよび検証する場合、CSSでサーバー側のスクリプトを実行する必要があることを意味します。また、ユーザーがサイトでCSSを実行できるようにする場合、theirCSSコードはサーバーサイドスクリプトを実行できないことを確認する必要があることも意味します。 。投稿のthis部分が有用だと思う人のほとんどは、どのようにアプローチするのかわからないかもしれず、それはすべて作業環境の整理方法にかかっています。

  1. 常にRAID 1、5、6、1 + 0または0 + 1でローカル環境を実行します（通常、存在しない「RAID 10」と誤認され、0 + 1および1 + 0は very異なる獣）。
  2. 作業内容（and個人ファイル）をOSと同じドライブに保存しないでください。あなたは最終的にあなたが気分に関係なく再フォーマットされます。
  3. ルートパスは次のようになります（WAMP（Windows、Apache、MariaDB、およびPHP）サーバー上）：D:\Web\Version 3.2\www.example.com\。
  4. PHPでは、$_SERVER['DOCUMENT_ROOT']から開始します（if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {}条件を使用してLinux OSを決定できます）。
  5. 古いバージョンのコピーを保持するのは、何かを忘れて台無しにした場合に作業コピーを確認する必要があるためです。

以下は、ライブサーバーがwww.（ https://example.com/ の代わりに- https://www.example.com/ ）を使用することを前提としています。

<?php
if (!isset($_SERVER['HTTP_Host']))
{
//Client does not know what domain they are requesting, return HTTP 400.
}
else
{
 //Get the domain name.
 if (substr($_SERVER['HTTP_Host'],0,4) === 'www.')
 {//Live Server
  $p0 = explode('www.',$_SERVER['HTTP_Host'],2);
  $domain = $p0[1];
 }
 else
 {//localhost
  $p0 = explode('www.',$_SERVER['REQUEST_URI']);

  if (isset($p0[2]))
  {
   $p1 = explode('/',$p0[2],2);
   $domain = $p1[0];
  }
  else
  {
   $p1 = explode('/',$p0[1],2);
   $domain = $p1[0];
  }
 }


 //Now reconstruct your *relative* URL.
 if (isset($_SERVER['HTTPS'])) {$https = 'https';}
 else {$https = 'http';}

 $p0 = explode('www.',$_SERVER['HTTP_Host']);

 if (stristr($_SERVER['HTTP_Host'],'www.'))
 {
  $a = array('p1'=>$https.'://www.'.$domain, 'p2'=>'/');
 }
 else
 {
  $dir_ver = explode('/www.',$_SERVER['REQUEST_URI']);

  if ($_SERVER['HTTP_Host']=='localhost' || $_SERVER['HTTP_Host']==$_SERVER['SERVER_NAME'])
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_Host'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
  else if (substr($_SERVER['HTTP_Host'],0,7)=='192.168' || substr($_SERVER['HTTP_Host'],0,4)=='127.')
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_Host'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
 }

 print_r($a);
}
?>

$aは、URLのtwo部分を返します。フロントページまたはWebサイトのルートURLは/になるため、文字列を比較するときにexplodeまたはsplitになると、about /はabout/になります。 （ローカルテストとライブテストの両方で）方法の約80％が得られるため、both環境で同じコードを実行して使用できます。 URLを再構築するCSS。

ブラウザのサポート

2019の時点でのみ Gecko 61+はこの機能をサポートし、フラグの後ろのみでサポートします。ウェブ作成者が使用できるようになることをすでに提唱しています。 David BaronはCSS条件付きルールモジュールレベル3の著者です。実際のCSS「親セレクタ」が存在しない主な理由は、パフォーマンスへの影響によるものです。この方法は、パフォーマンスへの影響を無効にします。また、HTML base要素が存在する場合に相対URLをサポートする必要があることも主張しました。 2019年以降（47,632年の皆さん、こんにちは！）にこれを読んでいる場合は、first以下のURLを参照してください。

1
John

そのために、JavaScriptコードをいくつか採用しました。たとえば、Reactで配列を反復処理する場合、親コンポーネントに別のクラスを追加します。これは、子が含まれていることを示します。

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {hasKiddos && kiddos.map(kid => (
        <div key={kid.id} className="kid">kid</div>
    ))}
</div>

そして単純に：

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}
0
Damiano

現在、子要素に基づいて親要素を変更できるのは、親要素内に<input>要素がある場合のみです。入力がフォーカスを取得すると、対応する親要素がCSSを使用して影響を受ける可能性があります。

次の例は、CSSで:focus-withinを使用して理解するのに役立ちます。

.outer-div {
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left
}

.outer-div:focus-within {
  background: red;
}

.inner-div {
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;
}
<div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div>
0
Sethuraman