css セレクタ 最 上位




CSSの親セレクタはありますか? (18)

CSSでは、階層の下のプロパティにカスケードできますが、逆方向にはカスケードできません。 子イベントの親スタイルを変更するには、おそらくjQueryを使用します。

$el.closest('.parent').css('prop','value');

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

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

li < a.active {
    property: value;
}

明らかにJavaScriptを使ってこれを行う方法がありますが、CSS Level 2に固有の回避策があることを期待しています。

私が作ってみようとしているメニューはCMSによって吐き出されているので、アクティブ要素を<li>要素に移動することはできません。

何か案は?


CSSを拡張してウェブサイトを設計するときに本当に役立つ非標準機能を含むプラグインがあります。 それはEQCSSと呼ばれています

EQCSSが追加するものの1つは、親セレクタです。 IE8以上のすべてのブラウザで動作します。 ここにフォーマットがあります:

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

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

ここ では、IE8動作する $parent$parentデモのデモと 、テストするためのIE8がない場合のスクリーンショットを示します

EQCSSには、選択された要素の前の要素のmeta-selectors $prev 、要素の照会と一致する要素の$prev thisなども含まれます。


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

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

id someIdの子要素を持つul要素を選択します。 または、元の質問に答えるには、次のようなものが(試行されていない)トリックを行う必要があります:

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

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

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

li.active > a {
    property: value;
}

hoverを使ったpointer-eventsを使ったハッキン​​グがあり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>


この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を選択してspan.helpすることができます:

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

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

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


これは、 セレクタレベル4仕様の中で最も論じられている側面です。 このセレクタを使用すると、指定されたセレクタ(!)の後に感嘆符を使用して、その子に応じて要素のスタイルを設定できます。

例えば:

body! a:hover{
   background: red;
}

ユーザーが任意のアンカーの上を移動すると、赤の背景色が設定されます。

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


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

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

他にもいくつか言及されているように、CSSだけで要素の親をスタイルする方法はありませんが、 jQuery次のように動作します。

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

技術的にはこれを行う直接的な方法はありませんが、jqueryかjavascriptを使ってそれを並べ替えることができます。

Howeve、あなたもこのようなことをすることができます。

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

jQuery

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

ここでjQueryを使用してこれを実現したい場合は、 jQuery親セレクタのリファレンスです


擬似要素: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>


現在のところ、標準のCSSには親セレクタはありませんが、私は7つの新しいセレクタの中でax (つまり、 拡張CSS Selector Syntax / ACSSSS )と呼ばれる(個人的な)プロジェクトに取り組んでいます:

  1. 直前の親セレクタ(これに反対の選択を可能にする)
  2. 任意の祖先セレクター ^[SPACE]と反対の選択を可能にする)

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

ここのデモをご覧ください:

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

(左の2つのリストを標準セレクタと比較し、右の2つのリストをaxセレクタを使って比較する)


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

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

Jonathan Snookは、CSSの評価方法について説明します

Chris CoyierさんがParentセレクターの話をしました

Harry Robertsは効率的なCSSセレクタを書き直しました

しかし、 Nicole Sullivanは好調な傾向について興味深い事実を持っています

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


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


私はあなただけのCSSで親を選択することはできないと思う。

しかし、あなたは既に.activeクラスを持っているようですが、そのクラスを( a代わりに) liに移動する方が簡単でしょうか? そうすれば、 lili両方にアクセスすることができます。


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

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

次に、ブラウザがロードされ、 </body>までページを赤くするかどうかを判断するまで待つ必要があります。

この記事では、 なぜ親セレクタを持たないのかを詳しく説明しています。


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

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

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

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





css-selectors