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

Derzeit gibt es keine Möglichkeit, das Elternelement eines Elements in CSS auf eine Weise auszuwählen, die in allen Browsern funktioniert.

Der Selectors Level 4 Working Draft enthält eine :has() Pseudo-Klasse, die diese Funktion bieten wird. Es wird ähnlich sein wie die jQuery-Implementierung, aber wird derzeit nicht von Firefox unterstützt.

li:has(> a.active) { /* styles to apply to the li tag */ }

Firefox ist derzeit der einzige große Browser, der es standardmäßig nicht unterstützt.

In der Zwischenzeit müssen Sie in Firefox auf JavaScript zurückgreifen, wenn Sie ein Elternelement mit voller Cross-Browser-Unterstützung auswählen müssen.

Answer 2

Sie können die :has() CSS-Pseudo-Klasse verwenden

Aber sie hat eine begrenzte Browserunterstützung (derzeit nur Chrome / Edge / Safari).

Answer 3

Ich denke nicht, dass Sie in CSS nur das übergeordnete Element auswählen können.

Aber da Sie anscheinend bereits eine .active Klasse haben, wäre es einfacher, diese Klasse auf das li zu verschieben (anstelle des a). Auf diese Weise können Sie sowohl auf das li als auch auf das a nur über CSS zugreifen.

Answer 4

Sie können dieses Skript verwenden:

*! > input[type=text] { background: #000; }

Dadurch wird jeder Elternelement eines Texteingabefelds ausgewählt. Aber warten Sie, es gibt noch viel mehr. Wenn Sie möchten, können Sie einen spezifischen Elternteil auswählen:

.input-wrap! > input[type=text] { background: #000; }

Oder wählen Sie es aus, wenn es aktiv ist:

.input-wrap! > input[type=text]:focus { background: #000; }

Überprüfen Sie dieses HTML:

    Ihr Name, bitte

Sie können das span.help wählen, wenn das input aktiv ist und es anzeigen:

.input-wrap! .help > input[type=text]:focus { display: block; }

Es gibt noch viele weitere Möglichkeiten; schauen Sie einfach in die Dokumentation des Plugins.

Übrigens funktioniert es im Internet Explorer.

Answer 5

Wie von einigen anderen erwähnt, gibt es keinen Weg, ein Element oder seine Eltern nur mit CSS zu gestalten, aber das folgende funktioniert mit jQuery:

$("a.active").parents('li').css("Eigenschaft", "Wert");