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

Dies ist der am meisten diskutierte Aspekt der Spezifikation Selector Level 4. Mit diesem wird ein Selektor in der Lage sein, ein Element entsprechend seines Kindes zu stylen, indem er ein Ausrufezeichen nach dem angegebenen Selektor (!) verwendet.

Zum Beispiel:

body! a:hover{
   background: red;
}

wird eine rote Hintergrundfarbe festlegen, wenn der Benutzer über einen Anchor schwebt.

Aber wir müssen auf die Implementierung der Browser warten :(

Answer 2

Nicht in CSS 2, soweit ich weiß. CSS 3 hat leistungsstärkere Selektoren, aber sie sind nicht konsistent in allen Browsern umgesetzt. Auch mit den verbesserten Selektoren glaube ich nicht, dass es genau das erreichen wird, was du in deinem Beispiel angegeben hast.

Answer 3

Sie könnten versuchen, das Hyperlink als übergeordnetes Element zu verwenden und dann die inneren Elemente bei Hover zu ändern. So sieht es aus:

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 Überrollen des übergeordneten Elements ändern.

Answer 4

Ich weiß, dass der OP nach einer CSS-Lösung gesucht hat, aber es ist einfach, dies mit jQuery zu erreichen. In meinem Fall musste ich das

Elternelement für ein Element finden, das im untergeordneten* enthalten ist. jQuery hat den :has Selektor, so dass es möglich ist, ein Elternelement anhand der enthaltenen Kinder zu identifizieren:

    $("ul:has(#someId)")

wird das `ul` Element auswählen, das ein Kindelement mit der id _someId_ hat. Oder um die ursprüngliche Frage zu beantworten, sollte etwas ähnliches wie das Folgende das Problem lösen (nicht getestet):

    $("li:has(.active)")

Answer 5

Hier ist ein Hack unter Verwendung von pointer-events mit hover:

/* Zubehör */
.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%;
}

/* relevant */
.parent {
    background: gray;
    pointer-events: none;
}
.parent:hover {
    background: fuchsia;
}
.parent 
.selector {
    pointer-events: auto;
}