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

Ich würde einige JavaScript-Code einstellen, um das zu erreichen. Zum Beispiel, in React, wenn Sie über ein Array iterieren, fügen Sie eine weitere Klasse zum Elternelement hinzu, die angibt, dass es Ihre Kinder enthält:

Und dann einfach:

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}

Answer 2

Dies ist eine Antwort auf eine ähnliche (aber nicht genau dieselbe) Frage, die zugunsten dieser Frage geschlossen wurde. Daher habe ich eine Antwort auf Wie ändert man die Rahmenfarbe, wenn das Eingabefeld aktiviert ist hier platziert.

Da es mit reinem CSS nicht möglich ist, das Styling eines Elternelements je nach Status seines Kindes zu ändern, ändert dieses Snippet das HTML so ab, dass ein leeres Span-Element unmittelbar nach den Eingabeelementen folgt. Dieses Span-Element tut nichts, bis auf das Eingabeelement gehovert wird, woraufhin es angezeigt wird und sich auf die gleiche Größe wie das übergeordnete Element ausdehnt, das positioniert ist. Dies ist das Label selbst, nicht das Eingabelement. Daher erscheint der Rahmen (Schatten), als ob er im Label wäre.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.OuterField {
  display: flex;
}

.listLabel {
  padding: 8px 5px;
  border: 2px solid black;
  width: 32%;
  margin: 1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row;
  position: relative;
}

input[type="radio"]~span {
  display: none;
}

input[type="radio"]:checked~span {
  display: inline-block;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  box-shadow: 0 0 0 3px orange;
  position: absolute;
  top: 0;
  left: 0;
}

  Liste 1

  Liste 2

Answer 3

Viele komplexe Lösungen in den Antworten. Aber du kennst den Eltern-Element, also ist die Lösung nicht komplex. Wenn du z.B. das Styling bei Aktivierung ändern möchtest.

.parentDiv > input[type="checkbox"]:checked {
    //style it
}