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

https://stackoverflow.com/questions/1014861

06-07-2019
|

質問

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

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

li < a.active {
    property: value;
}

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

スタイルを設定しようとしているメニューが CMS によって吐き出されているため、アクティブな要素を <li> 要素...(メニュー作成モジュールにテーマを設定しない限り、これはやりたくありません)。

何か案は？

解決

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

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

当面は、親要素を選択する必要がある場合はJavaScriptに頼る必要があります。

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

<=>を使用すると、元の質問はこれで解決できます：

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

他のヒント

しない<！>＃8217; tは、cssでのみ親を選択できるとは思わない。

しかし、あなたはすでに.activeクラスを持っているように見えるので、そのクラスをliの代わりにaに移動する方が簡単ですか？そうすれば、CSS経由でのみ<=>と<=>の両方にアクセスできます。

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

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

さらに多くの機能があります。プラグインのドキュメントをご覧ください。

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

他の数人が述べたように、CSSだけを使用して要素の親をスタイルする方法はありませんが、以下は jQuery ：

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

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

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

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

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

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

li.active > a {
    property: value;
}

はい： :has()

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

aをblock表示に切り替えてから、必要なスタイルを使用します。 li要素は<=>要素を埋め、必要に応じて外観を変更できます。 <=> paddingを0に設定することを忘れないでください。

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

CSSセレクター<！>＃8220; 一般的な兄弟コンビネーター <！>＃8221;おそらくあなたが望むものに使用できます：

E ~ F {
    property: value;
}

これは、F要素が先行するE要素と一致します。

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

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

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

は、 someId というIDを持つ子要素を持つul要素を選択します。または、元の質問に答えるために、次のようなものがトリックを実行する必要があります（テストなし）：

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

これは、セレクタレベル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;}

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

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

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

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

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

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

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

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

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

Chris Coyierによる親セレクターの話。

ハリーロバーツは、効率的なCSSセレクターの記述について。

しかしニコールサリバンにはいくつかの興味深い事実がありますポジティブな傾向について。

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

CSSを拡張して、Webサイトの設計時に本当に役立つ非標準機能を含めるプラグインがあります。 EQCSS と呼ばれます。

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

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

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

$prev と IE8で動作する別の$thisデモ、および IE8をテストしていない場合のスクリーンショット。

EQCSSには、選択された要素の前にある要素のメタセレクタ <=>も含まれます。<= >要素クエリに一致する要素のみ、その他。

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

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

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

jQuery

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

jQueryを使用してこれを実現する場合は、 jQuery親セレクタ

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

簡単な答えは 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;

今は2019年ですが、 CSS ネスティングモジュールの最新ドラフト実はこのようなものがあります。ご紹介 @nest アットルール。

3.2.ネスティングアットルール:@ネスト

直接ネストは見栄えがしますが、いくぶん脆弱です。.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; }
 */

現在、標準CSSには親セレクターはありませんが、 axe （つまり、 Augmented CSS Selector Syntax / ACSSSS ）と呼ばれる（個人）プロジェクトに取り組んでいます。 7つの新しいセレクターのうち、次の両方が含まれます。

直接の親セレクター<（これにより、>と反対の選択が可能になります）
任意の祖先セレクタ ^（[SPACE]とは反対の選択が可能）

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

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

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

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

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>

少なくともCSS3までは、そのような選択はできません。しかし、最近ではJSで簡単に実行できます。バニラ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のみで親を選択することはできません。

しかし、あなたはすでに.activeクラスを持っているように思えるので、nn !!そうすれば、CSS経由でのみliとaの両方にアクセスできます。

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

アイデアはありますか

後方に歩くにフックを追加すると、

CSS 4は派手になります。それまでは、checkboxおよび/またはradio input s を使用して通常の 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 MS 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 Arow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if ya 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 ya 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); /* MS!? */
}


/**
 * 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 ya 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だけを使用すると、bodyと:rootをリンクすることで、どこからでもidとforをタッチおよび再タッチできます。およびlabel / : :checked s および[checked] トリガーのプロパティ。おそらく誰かがそれらをある時点でレタッチする方法を示すでしょう。

もう1つの注意点は、特定の::afterの 1つ :hoverのみを使用できることです。最初に 勝つ他の状態になります単語... しかし複数のラベルはすべて同じ<=>を指すことができますが、HTMLとCSSの両方がより粗く見えるようになります。

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


他の<=>セレクターについてはわかりませんが、CSS3より前の<=>は、<=>のように正しく覚えていれば、上記のコードで見つけることができる理由です。たとえば、...

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

...しかし、<=>や<=>のようなものは、それらが最初に登場したCSSバージョンについてはまったく定かではありません。

すべて述べたが、これを本番で使用することは絶対にしないでください。怒りの中でさえ、冗談として、または言い換えれば、何かを行うことができるという理由だけで >すべき。

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

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

@document

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

各ページのナビゲーションヘッダーの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を実行できるようにする場合、CSSコードではサーバー側のスクリプトを実行できないようにする必要があることを意味します。投稿のこの部分が有用だと思う人のほとんどは、それにどのようにアプローチすればよいかわからないかもしれません。そして、すべてあなたの仕事環境を整理する方法に帰着します。

常にローカル環境をRAID 1、5、6、1 + 0または0 + 1（通常は存在しない<！> quot; RAID 10 <！> quot;および0 + 1および1+と誤解される）で実行する0は非常に異なる獣です）。

作業内容（および）をOSと同じドライブに保存しないでください。気分に関係なく、最終的に再フォーマットする。

ルートパスは次のようになります（WAMP（Windows、Apache、MariaDB、およびPHP）サーバー上）：D:\Web\Version 3.2\www.example.com\。

PHPでは、$_SERVER['DOCUMENT_ROOT']から開始します（if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {}条件でLinux OSを決定できます）。

古いバージョンのコピーを保持するのは、何かを忘れて台無しにした場合に作業コピーを確認する必要があるためです。したがって、バージョン管理を行います。

以下では、ライブサーバーがwww.（ https://www.example.com/ https://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の 2つの部分を返します。フロントページまたはWebサイトのルートURLは/であるため、文字列を比較するときにabout/またはexplodeにすると、about /はsplitになります。（ローカルテストとライブテストの両方で）方法の約80％が得られるため、両方環境で同じコードを実行し、CSSでそれを使用してURLを再構築できます。

ブラウザサポート

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

親要素内に入力要素がある場合、子要素に基づいて親要素を変更することができます。入力がフォーカスを取得すると、対応する親要素は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>

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow