Gibt es einen CSS-Elternselektor?

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?

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:

• Selektoren Level 3 Spec
• CSS 2.1 Selektoren Spec

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.

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.

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.

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

Ja: :has()

Browserunterstützung: keine

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.

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

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

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.

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.

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)")

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>

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 :(

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.

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.

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

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>

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.

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

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 .

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

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;

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

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>

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

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

/* ▼ - 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 .

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.

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>

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

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

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