質問: cssの親セレクタはありますか? アンカー要素の直接の親である<li>要素を選択する方法たとえば、私のcssは次のようになります。li < a.active { property: value; } javascriptでこれを実行する方法は明らかにありますが、css level 2にネイティブで存在するある種の回避策があることを私は望んでいます。私がスタイルを作ろうとしているメニューはcmsによって吐き出されているので、アクティブな要素を<li>要素に移動することはできません...(私がしたくないメニュー作成モジュールをテーマにしない限り)。何か案は?
回答: 現在、子要素に基づいて親要素を変更できるのは、親要素内に<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>