Frage Gibt es einen CSS-Selektor?


Wie wähle ich das aus? <li> Element, das ein direkter Elternteil des Ankerelements ist?

In meinem Beispiel wäre mein CSS etwa so:

li < a.active {
    property: value;
}

Offensichtlich gibt es Möglichkeiten, dies mit JavaScript zu tun, aber ich hoffe, dass es eine Art Workaround gibt, die nativ für CSS Level 2 existiert.

Das Menü, das ich zu stylen versuche, wird von einem CMS ausgespuckt, so dass ich das aktive Element nicht in das verschieben kann <li> Element ... (es sei denn ich theme das Menü Erstellungsmodul, das ich lieber nicht machen würde).

Irgendwelche Ideen?


2507
2018-06-18 19:59


Ursprung


Antworten:


Es gibt derzeit keine Möglichkeit, das übergeordnete Element eines Elements in CSS auszuwählen.

Wenn es einen Weg gäbe, es zu tun, wäre es in einer der aktuellen CSS-Selektoren-Spezifikationen:

In der Zwischenzeit müssen Sie auf JavaScript zurückgreifen, wenn Sie ein übergeordnetes Element auswählen müssen.


Das Selektoren Level 4 Arbeitsentwurf beinhaltet a :has() Pseudo-Klasse, die genauso funktioniert wie die jQuery-Implementierung. Ab 2018 Dies wird von keinem Browser unterstützt.

Verwenden :has() Die ursprüngliche Frage könnte damit gelöst werden:

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

2007
2018-06-18 20:16



Ich glaube nicht, dass Sie den Elternteil nur in CSS auswählen können.

Aber wie du schon scheinst eine zu haben .active Klasse, wäre es nicht einfacher, diese Klasse in die li (anstatt der a) Auf diese Weise können Sie auf beide zugreifen li und das a nur über CSS


119
2018-06-18 20:08



Sie können dies verwenden Skript.

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

Dies wird alle Eltern einer Texteingabe auswählen. Aber warte, es gibt noch viel mehr. Wenn Sie möchten, können Sie einen bestimmten Eltern auswählen:

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

oder wähle es aus, wenn es aktiv ist:

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

Schau dir diesen HTML an:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

Sie können das auswählen span.help wenn das input ist aktiv und zeige es:

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

Es gibt viel mehr Fähigkeiten; Schaut euch einfach die Dokumentation des Plugins an.

BTW, es funktioniert in IE.


99
2017-08-13 10:13



Wie von einigen anderen erwähnt, gibt es keine Möglichkeit, die Eltern / Elemente eines Elements nur mit CSS zu stylen, aber das Folgende funktioniert mit jQuery:

$("a.active").parents('li').css("property", "value");

74
2017-12-14 14:51



Es gibt keinen Elternselektor. genau so gibt es keinen vorherigen Geschwisterselektor. Ein guter Grund, diese Selektoren nicht zu haben, liegt darin, dass der Browser alle untergeordneten Elemente eines Elements durchqueren muss, um zu bestimmen, ob eine Klasse angewendet werden soll oder nicht. Zum Beispiel, wenn du geschrieben hast:

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

Dann muss der Browser warten bis er alles geladen und geparst hat bis der </body> um festzustellen, ob die Seite rot sein soll oder nicht.

Dieser Artikel Warum haben wir keinen Elternselektor? erklärt es im Detail.


44
2018-01-21 08:43



Es gibt keine Möglichkeit, dies in CSS2 zu tun. Sie könnten die Klasse zur li hinzufügen und auf die a verweisen

li.active > a {
    property: value;
}

39
2018-06-18 20:06



Der CSS-Selektor "Allgemeine Geschwister Combinator"Könnte vielleicht für das verwendet werden, was du willst:

E ~ F {
    property: value;
}

Dies entspricht allen F Element, dem ein vorangestelltes Element vorangestellt ist E Element.


26
2018-06-30 14:00



Versuche zu wechseln a zu block anzeigen und dann einen beliebigen Stil verwenden. aElement wird gefüllt li Element und Sie können das Aussehen ändern, wie Sie möchten. Vergiss nicht zu setzen li Auffüllen auf 0.

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

24
2017-11-23 09:03