クラス内の子要素のクラスに基づいて親要素を選択する方法はありますか？http://drupal.orgの素敵なメニュープラグインによるHTML出力に関連する私に関連する例。出力は次のようにレンダリングされます。
<ul class="menu">
<li>
<a class="active">Active Page</a>
</li>
<li>
<a>Some Other Page</a>
</li>
</ul>
私の質問は、アクティブなクラスを持つアンカーを含むリストアイテムにスタイルを適用できるかどうかです。明らかに、リストアイテムをアクティブとしてマークすることをお勧めしますが、生成されるコードを制御することはできません。javascriptを使用してこの種のことを実行できますが（JQueryが頭に浮かびます）、CSSセレクターを使用してこれを実行する方法があるかどうか疑問に思いました。
明確にするために、アンカーではなく、リストアイテムにスタイルを適用したいと思います。
セレクターは上昇できません
CSSには、特定の条件を満たす要素の親または祖先を選択する方法がありません。より高度なセレクタースキーム（XPathなど）により、より洗練されたスタイルシートが可能になります。ただし、CSSワーキンググループが親セレクターの提案を拒否する主な理由は、ブラウザーのパフォーマンスとインクリメンタルレンダリングの問題に関連しています。
そして、将来SOを検索する人にとって、これは祖先セレクターと呼ばれることもあります。
アップデート：
セレクターレベル4仕様では、選択のどの部分を対象にするかを選択できます。
セレクターのサブジェクトは、セレクター内の複合セレクターの1つにドル記号（$）を付加することにより、明示的に識別できます。セレクターが表す要素構造はドル記号の有無にかかわらず同じですが、この方法でサブジェクトを示すと、その構造内のサブジェクトを表す複合セレクターを変更できます。
例1：
たとえば、次のセレクターは、順序付きリストOLのリストアイテムLIの一意の子を表します。
OL > LI:only-childただし、次のリストは、一意の子を持つ順序付きリストOLを表しており、その子はLIです。
$OL > LI:only-childこれら2つのセレクターによって表される構造は同じですが、セレクターのサブジェクトは同じではありません。
これはどのブラウザでも、またはjQueryのセレクターとしては利用できませんが（現在、2011年11月）。
残念ながら、CSSでそれを行う方法はありません。
ただし、JavaScriptではそれほど難しくありません。
// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;
// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.
再びパーティーに遅れましたが、それだけの価値があるため、jQuery を使用してもう少し簡潔にすることができます。私の場合、 child に含まれるタグの<ul>親タグを見つける必要がありました。jQuery にはセレクターがあるため、含まれる子によって親を識別することができます (@Afrowave のコメント参照に従って更新: https://api.jquery.com/has-selector/ ):<span><li>:has
$("ul").has("#someId")
ID someIdulを持つ子要素を持つ要素を選択します。または、元の質問に答えるには、次のようなものでうまくいくはずです（テストされていません）：
$("li").has(".active")
現在、CSS の要素の親を選択するオプションはありません (CSS3 でさえ)。しかしCSS4では、現在の W3C ドラフトで最も重要なニュースは、親セレクターのサポートです。
$ul li:hover{
background: #fff;
}
上記を使用して、リスト要素にカーソルを合わせると、順序付けられていないリスト全体が白い背景を追加して強調表示されます。
公式ドキュメント: https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview (最後の行)。
セレクター レベル 4の最初のドラフトでは、セレクターのサブジェクトを明示的に設定する方法が概説されています。これにより、OP はセレクターを使用してリスト要素のスタイルを設定できます。$li > a.active
たとえば、次のセレクターは、順序付きリスト OL の一意の子であるリスト アイテム LI を表します。
OL > LI:only-childただし、次のものは、一意の子を持つ順序付きリスト OL を表し、その子は LI です。
$OL > LI:only-childこれら 2 つのセレクターによって表される構造は同じですが、セレクターのサブジェクトは異なります。
編集: ドラフト仕様がいかに「ドラフト」であるかを考えると、セレクター レベル 4 の CSSWG のページをチェックして、これを把握しておくのが最善です。
:has新しい CSS 仕様には、これを実行できる可能性のある実験的な疑似セレクターが含まれています。
li:has(a:active) {
/* ... */
}
これに対するブラウザのサポートは、現時点では基本的に存在しませんが、公式の仕様では考慮されています。
CSS が ASCEND できないのは事実ですが、別の要素の親要素を取得できないのは正しくありません。繰り返します：
HTML サンプル コードを使用すると、li を指定せずに li を取得できます。
ul * a {
property:value;
}
この例では、ul はある要素の親であり、その要素は anchor の親です。このメソッドを使用することの欠点は、アンカーを含む子要素を持つ ul がある場合、指定されたスタイルを継承することです。
とにかく親要素を指定する必要があるため、子セレクターも使用できます。
ul>li a {
property:value;
}
この例では、アンカーは、ul の子でなければならない li の子孫でなければなりません。つまり、ul 宣言に続くツリー内になければなりません。これはもう少し具体的で、アンカーを含み、かつ ul の子であるリスト項目のみを取得します。
SO、コードで質問に答えます。
ul.menu > li a.active {
property:value;
}
これにより、メニューのクラスを持つ ul と、アクティブなクラスを持つアンカーのみを含む子リスト項目が取得されます。
多くの人がjQuery親で答えましたが、それに追加するために、ナビゲーションにクラスを追加するために使用するコードの簡単なスニペットを共有したかったので、liサブメニューのみを持ち、それを持たないliにスタイリングを追加できますしないでください。
$("li ul").parent().addClass('has-sub');
Drupalでも同じ問題がありました。CSS の制限を考えると、これを機能させる方法は、メニュー HTML が生成されるときに「アクティブ」クラスを親要素に追加することです。これについては、 http: //drupal.org/node/219804で適切な議論が行われています。結論として、この機能は、nicemenus モジュールのバージョン 6.x-2.x に組み込まれています。これはまだ開発中であるため、パッチをhttp://drupal.org/node/465738で 6.x-1.3 にバックポートして、モジュールの製品版を引き続き使用できるようにしました。
実際、元のポスターと同じ問題に遭遇しました。.parent()jQueryセレクターを使用するだけの簡単な解決策があります。私の問題は、.parentの代わりに使用していたことです.parent()。私が知っている愚かな間違い。
イベントをバインドします (この場合、私のタブはモーダルであるため.live、basic の代わりにそれらをバインドする必要がありました.click。
$('#testTab1 .tabLink').live('click', function() {
$('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
$(this).parent().addClass("current"); //Add "current" class to selected tab
$('#modal div#testTab1 .tabContent').hide();
$(this).next('.tabContent').fadeIn();
return false;
})
$('#testTab2 .tabLink').live('click', function() {
$('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
$(this).parent().addClass("current"); //Add "current" class to selected tab
$('#modal div#testTab2 .tabContent').hide();
$(this).next('.tabContent').fadeIn();
return false;
})
ここにHTMLがあります..
<div id="tabView1" style="display:none;">
<!-- start: the code for tabView 1 -->
<div id="testTab1" style="width:1080px; height:640px; position:relative;">
<h1 class="Bold_Gray_45px">Modal Header</h1>
<div class="tabBleed"></div>
<ul class="tabs">
<li class="current"> <a href="#" class="tabLink" id="link1">Tab Title Link</a>
<div class="tabContent" id="tabContent1-1">
<div class="modalCol">
<p>Your Tab Content</p>
<p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
</div>
<div class="tabsImg"> </div>
</div>
</li>
<li> <a href="#" class="tabLink" id="link2">Tab Title Link</a>
<div class="tabContent" id="tabContent1-2">
<div class="modalCol">
<p>Your Tab Content</p>
<p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
</div>
<div class="tabsImg"> </div>
</div>
</li>
</ul>
</div>
</div>
もちろん、そのパターンを繰り返すことができます..より多くのLIで
ちょうど今、純粋な CSS ソリューションである可能性がある別の考えが浮かびました。アクティブなクラスを絶対配置ブロックとして表示し、そのスタイルを設定して親 li を覆い隠します。
a.active {
position:absolute;
display:block;
width:100%;
height:100%;
top:0em;
left:0em;
background-color: whatever;
border: whatever;
}
/* will also need to make sure the parent li is a positioned element so... */
ul.menu li {
position:relative;
}
jqueryを使わずにjavascriptを使いたい方へ...
親の選択は簡単です。getElementsByClassdrupal プラグインでアクティブなアイテムに Class ではなく ID を割り当てることができない限り、何らかの関数が必要です。私が提供した機能は、SO に関する他の天才から入手しました。うまく機能しますが、デバッグするときは、関数が単一のノードだけでなく、常にノードの配列を返すことに注意してください。
active_li = getElementsByClass("active","a");
active_li[0].parentNode.style.whatever="whatever";
function getElementsByClass(node,searchClass,tag) {
var classElements = new Array();
var els = node.getElementsByTagName(tag); // use "*" for all elements
var elsLen = els.length;
var pattern = new RegExp("\\b"+searchClass+"\\b");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}