Gibt es einen CSS-Eltern-Selektor?

Question

Wie wähle ich das

• Element aus, das ein direktes Elternteil des Anker Elements ist?

  Als Beispiel würde mein CSS so aussehen:

  li < a.active {
      property: value;
  }

  Offensichtlich gibt es Möglichkeiten, dies mit JavaScript zu tun, aber ich hoffe, dass es eine Art Umweg gibt, der nativ für CSS Level 2 existiert.

  Das Menü, das ich zu gestalten versuche, wird von einem CMS ausgespuckt, daher kann ich das aktive Element nicht zum

• Element verschieben... (es sei denn, ich thematisiere das Menüerstellungsmodul, was ich lieber nicht tun würde).

Answer 1

Der CSS-Eltern-Selektor (auch bekannt als der :has()-Selektor) ist endlich in Safari TP 137 gelandet. Das Feature wird derzeit auch in Chrome implementiert. (MDN-Dokumentation)

Die Auswahl des Elternelements erfolgt über die Pseudo-Klasse :has(). Zum Beispiel wird div:has(> .child) alle

-Elemente mit einem Kind auswählen, das die Klasse child hat.

Andere Beispiele:

Direkten Eltern-Selektor eines Elements auswählen

  Kind-Element

div:has(> p)

Alle Eltern eines Elements auswählen

Der folgende Selektor wird sowohl grandparent als auch parent auswählen

div:has(.child)

Es kann auch für verschachtelte Selektoren und sogar mit anderen Pseudo-Klassen verwendet werden:

div:has(> :nth-child(10))

Weitere gültige CSS-Operatoren können verwendet werden, um die Abfrage anzupassen.

Behalten Sie die Browserkompatibilität im Auge auf caniuse.com/css-has.

Answer 2

Aktuell gibt es keinen Elternselektor und er wird auch in keiner der Gespräche von W3C diskutiert. Du musst verstehen, wie CSS vom Browser ausgewertet wird, um zu verstehen, ob wir ihn brauchen oder nicht.

Hier gibt es viele technische Erklärungen.

Jonathan Snook erklärt, wie CSS ausgewertet wird.

Chris Coyier über die Gespräche zum Elternselektor.

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

Aber Nicole Sullivan hat interessante Fakten zu positiven Trends.

Diese Leute sind alle Spitzenklasse im Bereich der Frontend-Entwicklung.

Answer 3

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

Teil von HTML

    Link

Teil von CSS

/* Elternhintergründe ausblenden... */
.parent-background {
  display: none; }

/* ... und anzeigen, wenn auf Kinder gehovered wird */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

Aktualisiertes Demo und der Rest des Codes

Ein weiteres Beispiel, wie man es mit Texteingaben verwendet - wähle das übergeordnete Feldset aus

Answer 4

Es gibt ein Plugin, das CSS erweitert, um einige nicht standardmäßige Funktionen einzubeziehen, die wirklich helfen können, wenn man Websites entwirft. Es nennt sich EQCSS.

Eines der Dinge, die EQCSS hinzufügt, ist ein Eltern-Selektor. Es funktioniert in allen Browsern, Internet Explorer 8 und höher. Hier ist das Format:

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

Also haben wir hier eine Elementabfrage auf jedem Element a.active gestartet, und für die Stile innerhalb dieser Abfrage machen Dinge wie $parent Sinn, weil es einen Referenzpunkt gibt. Der Browser kann das Elternelement finden, da es dem in JavaScript sehr ähnlich ist parentNode.

Hier ist eine Demo von $parent und eine weitere $parent Demo, die in Internet Explorer 8 funktioniert, sowie einen Screenshot, falls du keinen Internet Explorer 8 hast, um damit zu testen.

EQCSS beinhaltet auch Metaselektoren: $prev für das Element vor einem ausgewählten Element und $this nur für die Elemente, die einer Elementabfrage entsprechen, und mehr.

Answer 5

Es ist jetzt 2019, und der neueste Entwurf des CSS-Nistmoduls hat tatsächlich so etwas. Einführung von @nest at-Regeln.

3.2. Die Nistroutine: @nest

Obwohl direkte Verschachtelung schön aussieht, ist sie etwas fragil. Einige gültige Verschachtelungsselektoren, wie z.B. .foo &, sind nicht erlaubt, und das Bearbeiten des Selektors auf bestimmte Weise kann die Regel unerwarteterweise ungültig machen. Außerdem finden einige Menschen die Verschachtelung visuell schwer von den umgebenden Deklarationen zu unterscheiden.

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

@nest = @nest { }

Die @nest-Regel funktioniert identisch zu einer Stilregel: sie beginnt mit einem Selektor und enthält Deklarationen, die auf die Elemente angewendet werden, die der Selektor auswählt. Der einzige Unterschied besteht darin, dass der in einer @nest-Regel verwendete Selektor nistend sein muss, was bedeutet, dass er irgendwo einen Verschachtelungsselektor enthält. Eine Liste von Selektoren ist nistend, wenn alle ihre einzelnen komplexen Selektoren nistend sind.

(Kopiert und eingefügt von der obigen URL).

Beispiel gültiger Selektoren gemäß dieser Spezifikation:

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* Äquivalent zu:
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* Äquivalent zu:
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* Äquivalent zu:
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */