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

2009年06月19日に質問されました。  ·  閲覧回数 2.2M回  ·  ソース

jcuenod picture
2009年06月19日

アンカー要素の直接の親である<li>要素を選択するにはどうすればよいですか?

例として、私のCSSは次のようになります。

li < a.active {
    property: value;
}

JavaScriptでこれを行う方法は明らかにありますが、CSSレベル2にネイティブに存在する何らかの回避策があることを期待しています。

私がスタイリングしようとしているメニューはCMSによって吐き出されているので、アクティブな要素を<li>要素に移動できません...(私が望むメニュー作成モジュールにテーマを設定しない限り)しないでください)。

何か案は?

回答

Dan Herbert picture
2009年06月19日
2691

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

それを行う方法があれば、それは現在のCSSセレクターの仕様のいずれかになります。

とは言うものの、セレクターレベル4ワーキングドラフトには、この機能を提供する:has()疑似クラスが含まれています。 これは、 jQueryの実装に似てい

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

ただし、2020年の時点では、これはどのブラウザでもまだサポートされていません

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

jeroen picture
2009年06月19日
160

CSSでのみ親を選択できるとは思いません。

ただし、すでに.activeクラスがあるように見えるので、そのクラスを( aではなく) liに移動する方が簡単です。 そうすれば、CSS経由でのみlia両方にアクセスできます。

Idered picture
2011年08月13日
133

このスクリプトを使用できます:

*! > 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; }

さらに多くの機能があります。 プラグインのドキュメントをチェックしてください。

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

Yukul&#233;l&#233; picture
2018年01月21日
128

はい: :has()

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

zcrar70 picture
2009年12月14日
111

他の数人が述べたように、CSSだけを使用して要素の親のスタイルを設定する方法はありませんが、 jQueryでは次のように機能します。

$("a.active").parents('li').css("property", "value");
Salman A picture
2014年01月21日
75

親セレクターはありません。 以前の兄弟セレクターがないのと同じように。 これらのセレクターがない理由の1つは、ブラウザーが要素のすべての子をトラバースして、クラスを適用するかどうかを決定する必要があるためです。 たとえば、次のように書いた場合:

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

次に、ブラウザは、ページが赤であるかどうかを判断するために、 </body>まですべてをロードして解析するまで待機する必要があります。

親セレクターがない理由については、記事で詳しく説明しています。

Josh picture
2009年06月19日
60

あなたがにクラスを追加することができCSS 2でこれを行う方法はありませんliおよびリファレンスa

li.active > a {
    property: value;
}
Raseko picture
2011年11月23日
37

ablock表示に切り替えてから、任意のスタイルを使用してください。 a要素はli a要素を埋め、必要に応じて外観を変更できます。 liパディングを0に設定することを忘れないでください。

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}
cobaasta picture
2011年06月30日
27

CSSセレクター「 GeneralSiblingCombinator 」は、次の目的で使用できます。

E ~ F {
    property: value;
}

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

sol picture
2017年09月25日
27

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

tabindex属性がある場合、要素をフォーカスできます。

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

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>