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

Versuchen Sie das...

Diese Lösung verwendet einfache CSS2-Regeln ohne Javascript und funktioniert in allen Browsern, alt und neu. Beim Klicken aktiviert das Kind-anchor-Tag sein active-Pseudo-Klassenevent. Es versteckt sich dann einfach, um das active-Event dem Eltern-li-Tag zu überlassen, der sich dann neu gestaltet und sein Ankerkind wieder mit einem neuen Stil enthüllt. Das Kind gestaltet also den Elternteil.

Verwenden Sie Ihr Beispiel:

        Dies ist ein Link

Wenden Sie diese Styles jetzt mit der active-Pseudoklasse auf a an, um den Eltern-li-Tag umzustylen, wenn auf den Link geklickt wird:

a.link {
    display: inline-block;
    color: white;
    background-color: green;
    text-decoration: none;
    padding: 5px;
}

li.listitem {
    display: inline-block;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

/* Wenn dieses 'active'-Pseudoklassenevent unten bei Klick ausgelöst wird, versteckt es sich und löst das aktive Event erneut auf seinem Elternelement aus, das neue Styles auf sich selbst und sein Kind anwendet. */

a.link:active {
    display: none;
}

.listitem:active {
    background-color: blue;
}

.listitem:active a.link {
    display: inline-block;
    background-color: transparent;
}

Sie sollten sehen, dass der Link mit grünem Hintergrund jetzt beim Klicken zu einem blauen Hintergrund des Listenelements wechselt.

wird zu

beim Klicken.

Answer 2

Nein, du kannst in CSS nur nicht das Elternelement auswählen.

Aber da du anscheinend bereits eine .active Klasse hast, wäre es einfacher, diese Klasse zum li zu verschieben (anstatt zum a). Auf diese Weise kannst du sowohl auf das li als auch auf das a nur mit CSS zugreifen.

Answer 3

Es gibt keinen CSS-Elternselektor (und daher auch in CSS-Präprozessoren), aufgrund von "Die Hauptgründe, warum die CSS-Arbeitsgruppe frühere Vorschläge für Elternselektoren abgelehnt hat, sind mit der Browserleistung und inkrementellen Rendering-Problemen verbunden."

Answer 4

Das Ändern des übergeordneten Elements auf der Grundlage des untergeordneten Elements kann derzeit nur erfolgen, wenn wir ein -Element innerhalb des übergeordneten Elements haben. Wenn ein Eingabefeld den Fokus erhält, kann das entsprechende übergeordnete Element mit CSS beeinflusst werden.

Das folgende Beispiel hilft Ihnen, die Verwendung von :focus-within in CSS zu verstehen.

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

    Ich möchte die Klasse outer-div (Hintergrundfarbe) basierend auf inner-div ändern. Ist das möglich?

Answer 5

Mindestens bis einschließlich CSS 3 kannst du nicht so auswählen. Aber heutzutage kann das ziemlich einfach in JavaScript gemacht werden, du musst nur ein bisschen Vanilla JavaScript hinzufügen, beachte, 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)
    };
});

Peter
Jackson link
Philip
Pullman link