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

Es gibt keinen Eltern-Selektor; genauso wenig wie es keinen vorherigen Geschwister-Selektor gibt. Ein guter Grund dafür, diese Selektoren nicht zu haben, ist, dass der Browser durch alle Kinder eines Elements traversieren muss, um festzustellen, ob eine Klasse angewendet werden soll. Wenn Sie beispielsweise Folgendes schreiben:

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

Dann muss der Browser warten, bis alles abgerufen und analysiert wurde, bis zum , um festzustellen, ob die Seite rot sein soll oder nicht.

Der Artikel _Warum wir keinen Eltern-Selektor haben_ erklärt es im Detail.

Answer 2

Das Pseudo-Element :focus-within ermöglicht es einem Elternelement, ausgewählt zu werden, wenn ein Nachkomme im Fokus steht.

Ein Element kann fokussiert werden, wenn es ein tabindex-Attribut hat.

Browser-Unterstützung für focus-within

Tabindex

Beispiel

.parent:focus-within {
  background: hsl(199deg, 65%, 73%);
}

/* Demo-Stile */
body {
  margin: 0;
}
.parent {
  background: hsl(0, 0%, 80%);
  min-height: 100vh;
  display: grid;
  place-content: center;
}
.child {
  background: hsl(0, 0%, 0%);
  color: white;
  padding: 3rem;
  outline: 0;
  cursor: pointer;
  font: 18px/1.25 sans-serif;
  width: 20ch;
}

    Klicke oder fokussiere mich, mein Elternelement wird sich ändern.

Answer 3

Es gibt keine Möglichkeit, dies in CSS 2 zu tun. Sie könnten die Klasse zum li hinzufügen und auf das a verweisen:

li.aktiv > a {
    Eigenschaft: Wert;
}

Answer 4

Versuchen Sie, a auf die Anzeige block umzuschalten, und verwenden Sie dann beliebigen Stil. Das a-Element füllt das li-Element aus, und Sie können sein Aussehen nach Belieben ändern. Vergessen Sie nicht, das Padding von li auf 0 zu setzen.

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

Answer 5

Der CSS-Selektor "Allgemeiner Geschwisterverknüpfungsoperator" könnte vielleicht für das verwendet werden, was Sie wollen:

E ~ F {
    eigenschaft: wert;
}

Dies passt zu jedem F-Element, das von einem E-Element vorangestellt ist.