Komplexer CSS-Selektor für Elternteil des aktiven Kindes

Question

Gibt es eine Möglichkeit, ein übergeordnetes Element auf der Grundlage der Klasse eines untergeordneten Elements in der Klasse auszuwählen? Das Beispiel, das für mich relevant ist, bezieht sich auf die HTML-Ausgabe eines netten Menü-Plugins für http://drupal.org . Die Ausgabe sieht folgendermaßen aus:

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>  
    </li>  
    <li>    
        <a>Some Other Page</a>  
    </li>  
</ul>  

Meine Frage ist, ob es möglich ist, einen Stil auf das Listenelement anzuwenden, das den Anker mit der aktiven Klasse enthält. Natürlich würde ich es vorziehen, dass das Listenelement als aktiv markiert wird, aber ich habe keine Kontrolle über den Code, der erzeugt wird. Ich könnte diese Art von Sache mit Javascript (JQuery Federn in den Sinn) durchführen, aber ich frage mich, ob es eine Möglichkeit, dies mit CSS-Selektoren zu tun ist.

Nur um klar zu sein, möchte ich eine Formatvorlage auf das Listenelement anwenden, nicht auf den Anker.

Answer 1

Laut Wikipedia :

Selektoren sind nicht in der Lage, aufzusteigen

CSS bietet keine Möglichkeit, ein übergeordnetes Element oder einen Vorgänger eines Elements auszuwählen, das bestimmte Kriterien erfüllt. Ein fortschrittlicheres Selektionsschema (wie XPath) würde anspruchsvollere Stylesheets ermöglichen. Die Hauptgründe für die Ablehnung von Vorschlägen für übergeordnete Selektoren durch die CSS-Arbeitsgruppe stehen jedoch im Zusammenhang mit der Leistung des Browsers und Fragen des inkrementellen Renderings.

Und für alle, die in Zukunft SO suchen, könnte dies auch als Ahnenselektor bezeichnet werden.

Aktualisierung:

En Selektoren Level 4 Spezifikation können Sie auswählen, welcher Teil der Auswahl das Motiv ist:

Der Betreff des Selektors kann explizit id sein ein Dollarzeichen ($) einem der zusammengesetzten Selektoren in einem Selektor vorangestellt wird. Obwohl die Elementstruktur, die der Selektor repräsentiert, die gleiche ist mit oder ohne das Dollarzeichen gleich ist, kann die Angabe des Subjekts auf diese Weise kann die Angabe des Subjekts auf diese Weise ändern, welcher zusammengesetzte Selektor das Subjekt in dieser Struktur repräsentiert.

Beispiel 1:

Der folgende Selektor stellt zum Beispiel einen Listeneintrag LI dar einer geordneten Liste OL:

OL > LI:only-child

Das folgende Beispiel stellt jedoch eine geordnete Liste OL mit einem eindeutigen Kind dar, wobei dieses Kind ein LI ist:

$OL > LI:only-child

Die Strukturen, die durch diese beiden ausgewählten aber die Subjekte der Selektoren sind es nicht.

Allerdings ist dies (derzeit, November 2011) in keinem Browser oder als Selektor in jQuery verfügbar.

Answer 2

Leider gibt es keine Möglichkeit, dies mit CSS zu tun.

Mit JavaScript ist das aber nicht sehr schwierig:

// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;

// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.

Answer 3

Spät zu der Partei wieder, aber für was es wert ist, ist es möglich, mit jQuery, ein wenig mehr prägnant sein. In meinem Fall brauchte ich, um die <ul> übergeordneten Tag für eine <span> Tag, das in der untergeordneten <li> . jQuery hat die :has Selektor, so dass es möglich ist, ein Elternteil anhand der Kinder, die es enthält, zu identifizieren (aktualisiert gemäß @Afrowaves Kommentar ref: https://api.jquery.com/has-selector/ ):

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

wählt die ul Element, das ein untergeordnetes Element mit id hat someId . Oder, um die ursprüngliche Frage zu beantworten, etwas wie das folgende sollte den Trick tun (ungetestet):

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

Answer 4

DER "ÜBERGEORDNETE" SELEKTOR

Derzeit gibt es keine Möglichkeit, das übergeordnete Element eines Elements in CSS auszuwählen (auch nicht in CSS3). Aber mit CSS4 Die wichtigste Neuerung des aktuellen W3C-Entwurfs ist die Unterstützung für den übergeordneten Selektor.

$ul li:hover{
    background: #fff;
}

Wenn Sie mit dem Mauszeiger über ein Listenelement fahren, wird die gesamte ungeordnete Liste hervorgehoben, indem ein weißer Hintergrund hinzugefügt wird.

Offizielle Dokumentation: https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview (letzte Reihe).

Answer 5

Künftige Antwort mit CSS4-Selektoren

Die neuen CSS Specs enthalten eine experimentelle :has Pseudoselektor, der diese Aufgabe übernehmen könnte.

li:has(a:active) {
  /* ... */
}

En Browserunterstützung zu diesem Thema gibt es im Grunde genommen noch nicht, aber es wird in der Kommission erwogen. offizielle Spezifikationen .

---

Antwort im Jahr 2012, die im Jahr 2012 falsch war und 2018 noch falscher ist

Es stimmt zwar, dass CSS nicht ASCEND sein kann, aber es ist nicht richtig, dass man das übergeordnete Element eines anderen Elements nicht greifen kann. Lassen Sie mich das wiederholen:

Wenn Sie Ihren HTML-Beispielcode verwenden, können Sie das li ohne Angabe von li

ul * a {
    property:value;
}

In diesem Beispiel ist die ul das übergeordnete Element eines Elements und dieses Element ist das übergeordnete Element von anchor. Der Nachteil dieser Methode ist, dass ein ul-Element mit einem untergeordneten Element, das einen Anker enthält, die angegebenen Stile erbt.

Sie können auch den untergeordneten Selektor verwenden, da Sie ohnehin das übergeordnete Element angeben müssen.

ul>li a {
    property:value;
}

In diesem Beispiel muss der Anker ein Nachkomme eines li sein, der ein Kind von ul sein MUSS, d. h. er muss sich innerhalb des Baums nach der ul-Deklaration befinden. Dies wird ein bisschen spezifischer sein und wird nur ein Listenelement erfassen, das einen Anker enthält UND ein Kind von ul ist.

SO, um Ihre Frage mit einem Code zu beantworten.

ul.menu > li a.active {
    property:value;
}

Dies sollte die ul mit der Klasse menu und das untergeordnete Listenelement, das nur einen Anker mit der Klasse active enthält, erfassen.