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

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

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

li < a.active {
    property: value;
}

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

スタイルを設定しようとしているメニューがCMSによって吐き出されているため、アクティブな要素を要素に移動できません<li>...

何か案は？

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

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

• セレクターレベル3仕様
• CSS 2.1セレクター仕様

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

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

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

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

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

ただし、すでに.activeクラスがあるように見えるので、そのクラスをli（の代わりにa）に移動する方が簡単です。そうすればli、aCSSを介してとの両方にアクセスできます。

次のスクリプトを使用できます。

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

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

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

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

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

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

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

はい： :has()

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

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

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

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

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

CSS 2でこれを行う方法はありません。クラスをに追加して、liを参照できますa。

li.active > a {
    property: value;
}

表示に切り替えてaからblock、任意のスタイルを使用してください。a要素がいっぱいになるli要素を、そしてあなたが望むように、その外観を変更することができるようになります。liパディングを0 に設定することを忘れないでください。

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

CSSセレクター「General Sibling Combinator」は、必要に応じて使用できます。

E ~ F {
    property: value;
}

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

私が知る限り、CSS 2ではありません。CSS 3にはより堅牢なセレクターがありますが、すべてのブラウザーに一貫して実装されているわけではありません。セレクターが改善されたとしても、例で指定したとおりの結果が得られるとは思いません。

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

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

ulid someIdの子要素を持つ要素を選択します。または、元の質問に答えるには、次のような方法でトリックを実行する必要があります（テストされていません）。

$("li:has(.active)")

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

要素は、tabindex属性を持つ場合にフォーカスできます。

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>

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

例えば：

body! a:hover{
   background: red;
}

ユーザーがアンカーにカーソルを合わせると、赤い背景色が設定されます。

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

親としてハイパーリンクを使用してから、ホバー時に内部要素を変更してみてください。このような：

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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

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

ここには多くの技術的な説明があります。

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

親セレクターの話についてのクリス・コイエ。

効率的なCSSセレクターの作成について、ハリーロバーツ氏は再度述べています。

しかし、ニコール・サリバンは、前向きな傾向についていくつかの興味深い事実を持っています。

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

水平メニューのアイデア...

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%; }

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

テキスト入力でそれを使用する別の例 -親フィールドセットを選択する

これはpointer-eventswith を使ったハックhoverです：

<!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>

CSSを拡張して、Webサイトの設計に役立つ非標準機能をいくつか組み込むプラグインがあります。EQCSSと呼ばれます。

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

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

したがって、ここではすべてのelementに対してelementクエリを開きました。参照ポイントがあるためa.active、そのクエリ内のスタイルについては、のような$parentことが理にかなっています。parentNodeJavaScriptと非常によく似ているため、ブラウザは親を見つけることができます。

$parentInternet Explorer 8で動作するデモと別の$parentデモ、およびInternet Explorer 8を使用してテストできない場合のスクリーンショットを次に示します。

EQCSSはまた、メタセレクタを：$prev選択した要素の前の要素のためにと$this要素クエリに一致する要素のみのために、そしてより多くの。

現在は2019年です。CSSネスティングモジュールの最新のドラフトには、実際には次のようなものがあります。@nestat-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; }
 */

技術的には、これを行う直接的な方法はありません。ただし、jQueryまたはJavaScriptのいずれかでそれを整理できます。

ただし、このようなこともできます。

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

jQuery

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

jQueryを使用してこれを実現したい場合は、ここにjQuery親セレクターのリファレンスがあります。

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

短い答えはNOです。我々は持っていないparent selectorCSSのこの段階では、しかし、あなたはとにかく要素やクラスを交換する必要がない場合は、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;

現在、標準CSSには親セレクターはありませんが、ax（つまり、拡張CSSセレクター構文/ ACSSSS）と呼ばれる（個人的な）プロジェクトに取り組んでおり、7つの新しいセレクターの中に次の両方が含まれています。

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

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

こちらのデモをご覧ください。

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

（標準セレクターでスタイル設定された左側の2つのリストと、axセレクターでスタイル設定された右側の2つのリストを比較してください）

少なくともCSS 3までは、そのように選択することはできません。しかし、最近のJavaScriptではかなり簡単に実行できます。ごく簡単な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>

何か案は？

CSS 4は、後ろ向きに歩くためのフックを追加するのであれば、すばらしいでしょう。それまでは（ただし可能ではない使用することをお勧め）、および/またはsのために壊す事が接続されていることを、通常の方法を、そのを通じてもCSSが通常の範囲の外で動作することができます...checkboxradio input

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

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

/* ▼ - 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>

...かなり大雑把ですが、CSSとHTML だけで、/ sとトリガーのとプロパティをリンクすることで、ほぼどこからでも、またbodyそれ以外のものにタッチしてリタッチすることが可能です。おそらく誰かがそれらをある時点で修正する方法を示すでしょう。:rootidforradiocheckbox inputlabel

一つの追加の注意点はそれだけで1 input特定のid最初の、多分使用checkbox/ radio 勝利言い換える切り替え状態を... しかし、複数のラベルが同じにすべてのポイントをすることができますinputそれは両方のHTMLとCSS表情さえグローサーなるだろうが、。

---

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

他の:セレクターについてはわかりませんが:checked、CSS以前3を使用しています。正しく覚えて[checked]いると、上記のコードで見つけることができるのはそのためです。たとえば、

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

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

つまり、怒りでさえも、これを本番で使用しないでください。冗談で、つまり何かを実行できるからといって、必ずしもそうであるとは限りません。

いいえ、CSSのみで親を選択することはできません。

ただし、すでに.activeクラスがあるように見えるので、そのクラスをli（の代わりにa）に移動する方が簡単です。そうすればli、aCSSを介してとの両方にアクセスできます。

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

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

.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>

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

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

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

そして単に：

.parent {
    color: #000;
}

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

「CSSワーキンググループが以前に親セレクターの提案を拒否した主な理由は、ブラウザーのパフォーマンスと増分レンダリングの問題に関連している」ため、CSS（したがってCSSプリプロセッサーでは）の親セレクターはありません。