Gibt es einen CSS-Elternselektor?

3176

Wie wähle ich das <li>Element aus, das dem Ankerelement direkt übergeordnet ist?

Als Beispiel wäre mein CSS ungefähr so:

li < a.active {
    property: value;
}

Natürlich gibt es Möglichkeiten, dies mit JavaScript zu tun, aber ich hoffe, dass es eine Art Problemumgehung gibt, die für CSS Level 2 typisch ist.

Das Menü, das ich zu gestalten versuche, wird von einem CMS ausgespuckt, sodass ich das aktive Element nicht in das <li>Element verschieben kann ... (es sei denn, ich thematisiere das Menü zur Menüerstellung, was ich lieber nicht tun würde).

Irgendwelche Ideen?

jcuenod
quelle

Antworten:

2534

Derzeit gibt es keine Möglichkeit, das übergeordnete Element eines Elements in CSS auszuwählen.

Wenn es eine Möglichkeit gäbe, wäre dies in einer der aktuellen CSS-Selektorspezifikationen enthalten:

Der Selectors Level 4 Working Draft enthält jedoch eine :has()Pseudoklasse, die diese Funktion bietet. Es wird der jQuery-Implementierung ähnlich sein .

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

Ab Mai 2020 wird dies jedoch von keinem Browser unterstützt .

In der Zwischenzeit müssen Sie auf JavaScript zurückgreifen, wenn Sie ein übergeordnetes Element auswählen müssen.

Dan Herbert
quelle
68
Es scheint, dass es bereits vorgeschlagen und abgelehnt wurde: stackoverflow.com/questions/45004/…
RobM
14
Sah aus wie das Thema Selektor hat wieder aufgegriffen wurde , mit Ausnahme von einem mit !jetzt:The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector.
animuson
13
Das $angehängte sah für mich besser aus ... das angehängte !kann leichter übersehen werden.
Christoph
51
Major Plot Twist! Der Selectors 4 WD wurde heute aktualisiert , um den Betreff-Indikator vom schnellen Profil auszuschließen, das von CSS-Implementierungen verwendet werden soll. Wenn diese Änderung bestehen bleibt, können Sie den Betreff-Indikator nicht mehr in Stylesheets verwenden (es sei denn, Sie fügen eine Art Polyfill hinzu, wie in einer anderen Antwort beschrieben ). Sie können ihn nur mit der Selectors-API und überall verwenden Andernfalls kann das vollständige Profil implementiert werden.
BoltClock
55
Ein weiteres wichtiges Update: Es sieht so aus, als würden sie erwägen, die Syntax der Subjektauswahl ganz abzuschaffen und durch das :has()Pseudo zu ersetzen, das jeder von jQuery kennen und lieben gelernt hat. Die letzte ED hat alle Verweise auf den Betreff-Indikator entfernt und durch den :has()Pseudo- Indikator ersetzt . Ich kenne die genauen Gründe nicht, aber die CSSWG hat vor einiger Zeit eine Umfrage durchgeführt, und die Ergebnisse müssen diese Entscheidung beeinflusst haben. Dies ist höchstwahrscheinlich auf die Kompatibilität mit jQuery zurückzuführen (damit qSA ohne Änderungen genutzt werden kann) und weil sich die Syntax der Betreffindikatoren als zu verwirrend erwiesen hat.
BoltClock
152

Ich glaube nicht, dass Sie das übergeordnete Element nur in CSS auswählen können.

Da Sie jedoch bereits eine .activeKlasse zu haben scheinen , ist es einfacher, diese Klasse in die li(anstelle der a) zu verschieben. Auf diese Weise können Sie nur über CSS auf das liund das azugreifen.

Jeroen
quelle
4
Sie können den Pseudo-Selektor nicht auf das Listenelement verschieben, da es sich nicht um ein fokussierbares Element handelt. Er verwendet den aktiven Selektor: Wenn der Anker aktiv ist, möchte er, dass das Listenelement betroffen ist. Listenelemente werden niemals im aktiven Zustand sein. Abgesehen davon ist es bedauerlich, dass es einen solchen Selektor nicht gibt. Es scheint unmöglich zu sein, ein reines CSS-Menü vollständig über die Tastatur zugänglich zu machen (mit Geschwister-Selektoren können Sie Untermenüs erstellen, die mit verschachtelten Listen erstellt wurden, aber sobald die Liste den Fokus erhält, wird sie wieder ausgeblendet). Wenn es nur CSS-Lösungen für diese spezielle Verbindung gibt
12
@Dominic Aquilina Schauen Sie sich die Frage an, das OP verwendet eine Klasse, keinen Pseudo-Selektor.
Jeroen
125

Sie können dieses Skript verwenden :

*! > input[type=text] { background: #000; }

Dadurch wird ein übergeordnetes Element einer Texteingabe ausgewählt. Aber warte, es gibt noch viel mehr. Wenn Sie möchten, können Sie ein bestimmtes übergeordnetes Element auswählen:

.input-wrap! > input[type=text] { background: #000; }

Oder wählen Sie es aus, wenn es aktiv ist:

.input-wrap! > input[type=text]:focus { background: #000; }

Schauen Sie sich diesen HTML-Code an:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

Sie können dies auswählen, span.helpwenn das inputaktiv ist, und es anzeigen:

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

Es gibt viel mehr Möglichkeiten; Schauen Sie sich einfach die Dokumentation des Plugins an.

Übrigens funktioniert es in Internet Explorer.

Idered
quelle
5
Angenommen, die Verwendung von jquery patent()wäre schneller. Dies muss jedoch getestet werden
Dan
2
@Idered Es schlägt fehl, wenn Sie eine CSS-Deklaration eines Selektor-Betreffs ohne untergeordneten Selektor haben ( #a!allein löst einen Fehler aus, #a! pfunktioniert), und daher funktionieren die anderen auch nicht, weil Uncaught TypeError: Cannot call method 'split' of undefined: siehe jsfiddle.net/HerrSerker/VkVPs
yunzen
3
@HerrSerker Ich denke #a! ist ein ungültiger Selektor, was soll er auswählen?
Idered
2
@Idered Ich weiß es nicht. Die Spezifikation sagt nicht, dass es illegal ist. #ein! sollte sich selbst auswählen. Zumindest sollte ihr kein Fehler im JavaScript sein
yunzen
5
Laut meinem Kommentar zur akzeptierten Antwort sieht es so aus, als ob die Polyfüllung auch in naher Zukunft erforderlich sein könnte, da die Betreffanzeige möglicherweise nie von Browsern in CSS implementiert wird.
BoltClock
108

Wie von einigen anderen erwähnt, gibt es keine Möglichkeit, die übergeordneten Elemente eines Elements nur mit CSS zu formatieren, aber das Folgende funktioniert mit jQuery :

$("a.active").parents('li').css("property", "value");
zcrar70
quelle
21
Der <Selektor existiert nicht (überprüft mit jQuery 1.7.1).
Rob W
6
Vielleicht hat diese <Steuer 2009 funktioniert, aber ich habe sie aktualisiert (für 2013).
Alastair
5
Verwenden Sie noch besser den integrierten :has()Selektor von jQuery : $("li:has(a.active)").css("property", "value");. Es liest sich ähnlich wie der von CSS 4 vorgeschlagene !Selektor. Siehe auch: :parentSelektor , .parents()Methode , .parent()Methode .
Rory O'Kane
7
Und anstatt .css("property", "value")die ausgewählten Elemente zu formatieren, sollten Sie sie normalerweise .addClass("someClass")in Ihrem CSS .someClass { property: value }( via ) verwenden. Auf diese Weise können Sie den Stil mit der vollen Leistung von CSS und allen von Ihnen verwendeten Präprozessoren notieren.
Rory O'Kane
69

Es gibt keinen übergeordneten Selektor. Genau so, wie es keinen vorherigen Geschwister-Selektor gibt. Ein guter Grund dafür, dass diese Selektoren nicht vorhanden sind, besteht darin, dass der Browser alle untergeordneten Elemente eines Elements durchlaufen muss, um zu bestimmen, ob eine Klasse angewendet werden soll oder nicht. Zum Beispiel, wenn Sie geschrieben haben:

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

Dann muss der Browser warten, bis er alles geladen und analysiert hat, bis </body>festgestellt wird, ob die Seite rot sein soll oder nicht.

Der Artikel Warum wir keinen übergeordneten Selektor haben, erklärt dies ausführlich.

Salman A.
quelle
11
Machen Sie den Browser also schneller. das Internet selbst schneller. Dieser Selektor wird definitiv benötigt, und der Grund dafür, ihn nicht zu implementieren, ist leider, dass wir in einer langsamen, primitiven Welt leben.
vsync
11
Tatsächlich würde der Selektor einen sehr schnellen Browser langsam aussehen lassen.
Salman A
5
Ich vertraue darauf, dass Browser-Entwickler eine Implementierung entwickeln würden, die (mindestens) so schnell ist wie die Javascript-Version, die die Leute sowieso verwenden.
März 2377
"Wir leben in einer langsamen, primitiven Welt" Husten Husten New Apple Watch Husten Husten
Marvin
@ Marc.2377 Wenn Sie das obige Beispiel in JS auf Ihrer Website ausprobieren, werde ich es nie besuchen. Auf der anderen Seite würde ich sagen, dass Sie sich die meiste Zeit nur um unmittelbare Kinder kümmern. Wenn es also nur auf die unmittelbaren Kinder beschränkt wäre, wäre es eine gute Ergänzung ohne allzu große Auswirkungen.
Xryl669
54

In CSS 2 gibt es keine Möglichkeit, dies zu tun. Sie können die Klasse hinzufügen liund auf Folgendes verweisen a:

li.active > a {
    property: value;
}
Josh
quelle
3
Indem Sie den Block a element display: festlegen, können Sie ihn so gestalten, dass er in den gesamten li-Bereich passt. Wenn Sie erklären können, welchen Stil Sie suchen, könnte ich Ihnen vielleicht bei einer Lösung helfen.
Josh
Dies ist eigentlich eine einfache und elegante Lösung, und in vielen Fällen ist es sinnvoll, die Klasse auf das übergeordnete Element festzulegen.
Ricardo
35

Versuchen Sie, azur blockAnzeige zu wechseln , und verwenden Sie dann einen beliebigen Stil. Das aElement füllt das liElement und Sie können sein Aussehen nach Ihren Wünschen ändern. Vergessen Sie nicht, die liAuffüllung auf 0 zu setzen.

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

Der CSS-Selektor „ General Sibling Combinator “ kann möglicherweise für folgende Zwecke verwendet werden:

E ~ F {
    property: value;
}

Dies entspricht jedem FElement, dem ein EElement vorangestellt ist.

cobaasta
quelle
24
Dies ist nur Geschwister Selektor, es ist nicht Kind, Eltern ... nicht wirklich die Frage Kumpel zu beantworten
Alireza
26

Soweit mir bekannt ist, nicht in CSS 2. CSS 3 verfügt über robustere Selektoren, ist jedoch nicht in allen Browsern konsistent implementiert. Selbst mit den verbesserten Selektoren glaube ich nicht, dass es genau das erreichen wird, was Sie in Ihrem Beispiel angegeben haben.

Mark Hurd
quelle
24

Ich weiß, dass das OP nach einer CSS-Lösung gesucht hat, aber es ist einfach, dies mit jQuery zu erreichen. In meinem Fall musste ich das <ul>übergeordnete Tag für ein <span>im Kind enthaltenes Tag finden <li>. jQuery verfügt über den :hasSelektor, sodass ein Elternteil anhand der darin enthaltenen untergeordneten Elemente identifiziert werden kann:

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

wählt das ulElement aus, das ein untergeordnetes Element mit der ID someId hat . Oder um die ursprüngliche Frage zu beantworten, sollte etwas wie das Folgende den Trick tun (ungetestet):

$("li:has(.active)")
David Clarke
quelle
3
Oder verwenden $yourSpan.closest("ul")Sie und Sie erhalten die übergeordnete UL Ihres span-Elements. Trotzdem ist Ihre Antwort imho völlig offtopisch. Wir können alle CSS-Fragen mit einer jQuery-Lösung beantworten.
Robin van Baalen
1
Wie in anderen Antworten angegeben, gibt es keine Möglichkeit, dies mit CSS 2 zu tun. Angesichts dieser Einschränkung ist die von mir angegebene Antwort eine, von der ich weiß, dass sie effektiv ist und die einfachste Möglichkeit, die Frage mit Javascript imho zu beantworten.
David Clarke
In Anbetracht Ihrer positiven Stimmen stimmen einige Leute Ihnen zu. Aber die einzige Antwort bleibt die akzeptierte; schlicht und einfach "es kann nicht so gemacht werden, wie du es willst". Wenn die Frage lautet, wie man mit dem Fahrrad 100 km / h erreicht, und Sie sie mit "einfach; steigen Sie in ein Auto und geben Sie Gas" beantworten, ist dies immer noch keine Antwort. Daher mein Kommentar.
Robin van Baalen
1
Dieser Ansatz würde SO fast völlig nutzlos machen. Ich suche SO, wie man Probleme löst, nicht um die "einzige Antwort" zu finden, die das Problem nicht anspricht. Deshalb ist SO so großartig, weil es immer mehr als einen Weg gibt, eine Katze zu häuten.
David Clarke
23

Mit dem Pseudoelement :focus-withinkann ein Elternteil ausgewählt werden, wenn ein Nachkomme den Fokus hat.

Ein Element kann fokussiert werden, wenn es ein tabindexAttribut hat.

Browserunterstützung für Focus-Within

Tabindex

Beispiel

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

Sol
quelle
2
Das funktioniert in meinem Fall gut, danke! Nur nicht, wäre das Beispiel mehr ilustrative wenn Sie die Farbe auf die Mutter ändern, nicht auf die Geschwister, dann ist dies ersetzen .color:focus-within .changemit .color:focus-within. In meinem Fall verwende ich eine Bootstrap-Navigationsleiste, die die Klasse den untergeordneten Elementen hinzufügt, wenn sie aktiv ist, und ich möchte der übergeordneten .nav-Leiste eine Klasse hinzufügen. Ich denke, dies ist ein ziemlich häufiges Szenario, in dem ich das Markup besitze, aber die Komponente css + js ist Bootstrap (oder eine andere), sodass ich das Verhalten nicht ändern kann. Obwohl ich tabindex hinzufügen und dieses CSS verwenden kann. Vielen Dank!
Cancerbero
22

Dies ist der am meisten diskutierte Aspekt der Selectors Level 4- Spezifikation. Auf diese Weise kann ein Selektor ein Element entsprechend seinem untergeordneten Element formatieren, indem er ein Ausrufezeichen nach dem angegebenen Selektor (!) Verwendet.

Zum Beispiel:

body! a:hover{
   background: red;
}

setzt eine rote Hintergrundfarbe, wenn der Benutzer über einen Anker schwebt.

Wir müssen jedoch auf die Implementierung des Browsers warten :(

Marco Allori
quelle
21

Sie können versuchen, einen Hyperlink als übergeordnetes Element zu verwenden und dann die inneren Elemente beim Hover ändern. So was:

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

Auf diese Weise können Sie den Stil in mehreren inneren Tags basierend auf dem Rollover des übergeordneten Elements ändern.

Flusssturm
quelle
1
Das ist richtig, beschränkt den Markup-Code innerhalb des aTags jedoch nur auf bestimmte Elemente, wenn Sie den XHTML-Standards entsprechen möchten. Zum Beispiel können Sie nicht verwenden , divinnerhalb a, ohne eine Warnung des Verstoßes gegen das Schema zu bekommen.
Ivaylo Slavov
2
Ganz richtig Ivaylo! "a" ist ein Nicht-Block-Element, kann also keine Blockelemente darin verwenden.
Flusssturm
1
In HTML5 ist es vollkommen in Ordnung, Blockelemente in Links einzufügen.
Matthew James Taylor
2
... wenn es semantisch falsch wäre, hätten sie es in HTML5 nicht zugelassen, wo es vorher nicht war.
BoltClock
14

Derzeit gibt es keinen übergeordneten Selektor und er wird in keinem der Gespräche von W3C diskutiert. Sie müssen verstehen, wie CSS vom Browser ausgewertet wird, um tatsächlich zu verstehen, ob wir es benötigen oder nicht.

Hier gibt es viele technische Erklärungen.

Jonathan Snook erklärt, wie CSS bewertet wird .

Chris Coyier über die Gespräche von Parent Selector .

Harry Roberts erneut über das Schreiben effizienter CSS-Selektoren .

Aber Nicole Sullivan hat einige interessante Fakten zu positiven Trends .

Diese Leute sind alle erstklassig im Bereich der Front-End-Entwicklung.

Suraj Naik
quelle
12
Das needwird durch die Anforderungen der Webentwickler definiert. Ob es in der Spezifikation enthalten sein soll, hängt von anderen Faktoren ab.
nicodemus13
14

Nur eine Idee für horizontales Menü ...

Teil von HTML

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

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

Demo und der Rest des Codes aktualisiert

Ein weiteres Beispiel für die Verwendung mit Texteingaben: Wählen Sie das übergeordnete Feldset aus

Ilya B.
quelle
3
Mir ist überhaupt nicht klar, wie Sie dies auf einige / viele / die meisten Anwendungsfälle der übergeordneten Auswahl verallgemeinern wollen oder sogar genau, welche Teile dieses CSS was tun. Können Sie eine gründliche Erklärung hinzufügen?
Nathan Tuggy
2
Ich habe nicht versucht, dies auf reale Szenarien anzuwenden, deshalb sage ich "Nicht für die Produktion". Aber ich denke, es kann nur mit fester Elementbreite auf ein 2-Ebenen-Menü angewendet werden. "Welche Teile dieses CSS machen was?" - .test-sibling hier ist eigentlich der Hintergrund des übergeordneten Elements (die letzte Zeile des CSS).
Ilya B.
2
Erklärung hinzugefügt (CSS-Abschnitt von jsfiddle, beginnend mit "MAIN PART") ... Und ich habe mich geirrt - es kann eine beliebige Anzahl von Unterebenen geben.
Ilya B.
13

Hier ist ein Hack pointer-eventsmit 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>

Jan Kyu Peblik
quelle
12

Es gibt ein Plugin, das CSS um einige nicht standardmäßige Funktionen erweitert, die beim Entwerfen von Websites wirklich hilfreich sein können. Es heißt EQCSS .

EQCSS fügt unter anderem einen übergeordneten Selektor hinzu. Es funktioniert in allen Browsern, Internet Explorer 8 und höher. Hier ist das Format:

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

Hier haben wir also für jedes Element eine Elementabfrage geöffnet a.active, und für die Stile in dieser Abfrage sind Dinge wie $parentsinnvoll, da es einen Referenzpunkt gibt. Der Browser kann das übergeordnete Element finden, da es parentNodeJavaScript sehr ähnlich ist .

Hier ist eine Demo von$parent und eine weitere $parentDemo, die in Internet Explorer 8 funktioniert , sowie ein Screenshot für den Fall, dass Sie nicht mit Internet Explorer 8 testen können .

EQCSS enthält auch Meta-Selektoren : $prevfür das Element vor einem ausgewählten Element und $thisnur für die Elemente, die einer Elementabfrage entsprechen, und mehr.

innovati
quelle
11

Es ist jetzt 2019 und der neueste Entwurf des CSS-Verschachtelungsmoduls enthält tatsächlich so etwas. Einführung @nestin die Regeln.

3.2. Die Verschachtelungsregel: @nest

Direkte Verschachtelung sieht zwar gut aus, ist aber etwas zerbrechlich. Einige gültige Verschachtelungsselektoren wie .foo & sind nicht zulässig. Wenn Sie den Selektor auf bestimmte Weise bearbeiten, kann die Regel unerwartet ungültig werden. Einige Leute finden es auch schwierig, die Verschachtelung visuell von den umgebenden Deklarationen zu unterscheiden.

Um all diese Probleme zu lösen, definiert diese Spezifikation die @ nest-Regel, die weniger Einschränkungen für die gültige Verschachtelung von Stilregeln auferlegt. Die Syntax lautet:

@nest = @nest <selector> { <declaration-list> }

Die @ nest-Regel funktioniert identisch mit einer Stilregel: Sie beginnt mit einem Selektor und enthält Deklarationen, die für die Elemente gelten, mit denen der Selektor übereinstimmt. Der einzige Unterschied besteht darin, dass der in einer @ nest-Regel verwendete Selektor nesthaltig sein muss, was bedeutet, dass er irgendwo einen Nesting-Selektor enthält. Eine Liste von Selektoren enthält ein Nest, wenn alle einzelnen komplexen Selektoren ein Nest enthalten.

(Kopieren und Einfügen von der obigen URL).

Beispiel für gültige Selektoren unter dieser Spezifikation:

.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; }
 */
roberrrt-s
quelle
10

Technisch gibt es keinen direkten Weg, dies zu tun. Sie können dies jedoch entweder mit jQuery oder JavaScript klären.

Sie können jedoch auch so etwas tun.

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

jQuery

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

Wenn Sie dies mit jQuery erreichen möchten, finden Sie hier die Referenz für den übergeordneten jQuery-Selektor .

Prabhakar Undurthi
quelle
9

Das W3C schloss einen solchen Selektor aufgrund der enormen Auswirkungen auf die Leistung eines Browsers aus.

rgb
quelle
27
falsch. Da das DOM ein Baum ist, müssen sie zum Elternteil gehen, bevor sie zum Kind gelangen, also gehen sie einfach nur einen Knoten zurück. oo
NullVoxPopuli
9
CSS-Selektoren sind eine Warteschlange, sodass die Selektorreihenfolge anstelle der XPath- oder DOM-Hierarchie des Dokuments ausgewertet wird.
Paul Sweatte
3
@rgb Zumindest haben sie uns das gesagt.
Yunzen
9

Die kurze Antwort lautet NEIN ; Wir haben derzeit keine parent selectorin CSS, aber wenn Sie die Elemente oder Klassen sowieso nicht austauschen müssen, ist die zweite Option die Verwendung von JavaScript. Etwas wie das:

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

Oder kürzer, wenn Sie jQuery in Ihrer Anwendung verwenden:

$('a.active').parents('li').css('color', 'red'); // Your property: value;
Alireza
quelle
5

Obwohl es derzeit keinen übergeordneten Selektor in Standard-CSS gibt, arbeite ich an einem (persönlichen) Projekt namens ax (dh Augmented CSS Selector Syntax / ACSSSS ), das unter seinen 7 neuen Selektoren beides umfasst:

  1. ein unmittelbar übergeordneten Selektor <(der das entgegengesetzte Auswahl ermöglicht >)
  2. eine beliebige Ahnenauswahl ^ (die die entgegengesetzte Auswahl ermöglicht [SPACE])

ax befindet sich derzeit in einem relativ frühen BETA-Entwicklungsstadium.

Sehen Sie hier eine Demo:

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

(Vergleichen Sie die beiden Listen auf der linken Seite mit Standard-Selektoren und die beiden Listen auf der rechten Seite mit Axt-Selektoren.)

Rounin
quelle
3
Das Projekt befindet sich derzeit in einer frühen Beta-Phase. Sie können (zumindest derzeit) Axt-Selektoren in Ihren CSS-Stilen aktivieren, indem <script src="https://rouninmedia.github.io/axe/axe.js"></script>Sie sie kurz vor dem Ende Ihres HTML-Dokuments einfügen </body>.
Rounin
4

Zumindest bis einschließlich CSS 3 können Sie dies nicht auswählen. Aber es kann heutzutage ziemlich einfach in JavaScript gemacht werden. Sie müssen nur ein bisschen Vanille-JavaScript hinzufügen. Beachten Sie, dass der Code ziemlich kurz ist.

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>

Eduard Florinescu
quelle
4

Irgendwelche Ideen?

CSS 4 wird Phantasie, wenn es einige fügt Haken in Fuß nach hinten . Bis dahin ist es möglich (wenn auch nicht ratsam) zu verwenden checkboxund / oder radio inputs zu brechen die übliche Art und Weise , dass die Dinge verbunden sind, und durch das auch CSS erlauben außerhalb seines normalen Umfang zu betreiben ...

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

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

/* &#9660; - 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>

... ziemlich eklig , aber mit nur CSS und HTML ist es möglich, alles andere als das bodyund :rootvon fast überall zu berühren und erneut zu berühren, indem die idund forEigenschaften von radio/ checkbox inputs und label Triggern verknüpft werden . wahrscheinlich wird irgendwann jemand zeigen, wie man diese wieder berührt.

Eine zusätzliche Einschränkung ist, dass nur eines input von einem bestimmten idmöglicherweise verwendet wird, mit anderen Worten zuerst checkbox/ einen umgeschalteten Zustand radio gewinnt ... Aber mehrere Beschriftungen können alle auf dasselbe verweisen input, obwohl dadurch sowohl HTML als auch CSS noch gröber aussehen würden.


Ich hoffe, dass es eine Art Problemumgehung gibt, die in CSS Level 2 enthalten ist ...

Ich bin mir bei den anderen :Selektoren nicht sicher , aber ich :checkedfür Pre-CSS 3. Wenn ich mich richtig erinnere, war es so etwas [checked], weshalb Sie es beispielsweise im obigen Code finden können, z.

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

... aber für Dinge wie ::afterund :hoverbin ich mir überhaupt nicht sicher, in welcher CSS-Version diese zuerst erschienen sind.

Bitte verwenden Sie dies niemals in der Produktion, auch nicht im Zorn. Ein Witz, oder mit anderen Worten, nur weil etwas getan werden kann , heißt das nicht immer, dass es getan werden sollte .

S0AndS0
quelle
3

Nein, Sie können das übergeordnete Element nicht nur in CSS auswählen.

Da Sie jedoch bereits eine .activeKlasse zu haben scheinen , ist es einfacher, diese Klasse in die li(anstelle der a) zu verschieben. Auf diese Weise können Sie nur über CSS auf das liund das azugreifen.

Gaurav Aggarwal
quelle
1

Das Ändern des übergeordneten Elements basierend auf dem untergeordneten Element kann derzeit nur erfolgen, wenn sich ein <input>Element im übergeordneten Element befindet. Wenn eine Eingabe fokussiert wird, kann das entsprechende übergeordnete Element mithilfe von CSS beeinflusst werden.

Das folgende Beispiel hilft Ihnen beim Verständnis der Verwendung :focus-withinin 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>

Sethuraman
quelle
1

Mit kaufmännischem Und in Sass ist das möglich :

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

CSS-Ausgabe:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}
Rodolfo Jorge Nemer Nogueira
quelle
2
Es ist wahr, aber nur, wenn Sie den Selektor im Voraus kennen.
Shahar
11
Dies wählt nichth3 den Elternteil aus, der das Ziel war. Dies würde h3s auswählen, die Nachkommen von sind .some-parent-selector.
Jacob Ford
1

Ich würde dafür einen JavaScript-Code mieten. Fügen Sie beispielsweise in Reagieren, wenn Sie über ein Array iterieren, der übergeordneten Komponente eine weitere Klasse hinzu, die angibt, dass sie Ihre untergeordneten Komponenten enthält:

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

Und dann einfach:

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}
Damiano
quelle
0

Es gibt keinen übergeordneten CSS-Selektor (und daher in CSS-Präprozessoren) aufgrund von "Die Hauptgründe dafür, dass die CSS-Arbeitsgruppe Vorschläge für übergeordnete Selektoren zuvor abgelehnt hat, hängen mit der Browserleistung und inkrementellen Rendering-Problemen zusammen."

Dmitry Sokolov
quelle