nur jedes LI vor einem UL ansprechen

[Tim(m)y]

Ich möchte in ein Liste nur jedes LI ansprechen das vor einem UL steht.

Timmy

<ul>
<li>x</li>
<li>x</li>
<li>GENAU DAS HIER <------------------------------------
<ul>
<li>-----</li>
<li>-----</li>
<li>-----</li>
<li>-----</li>
<li>-----</li>
<li>-----</li>
<ul>
</li>
<li>x</li>
<li>x</li>
<li>GENAU DAS HIER <------------------------------------
<ul>
<li>-----</li>
<li>-----</li>
<li>-----</li>
<li>-----</li>
<li>-----</li>
<li>-----</li>
<li>-----</li>
<ul>
</li>
<li>x</li>
<ul>

[Auge]

Hallo

Ich möchte in ein Liste nur jedes LI ansprechen das vor einem UL steht.

<ul>
<li>x</li>
<li>x</li>
<li>GENAU DAS HIER <------------------------------------
<ul>
<li>-----</li>
</ul>
</li>
<!-- u.s.w. -->

Das geht nur, wenn du genau weißt welches li gemeint ist (':nth-child()') oder du die entsprechenden li mit einem zusätzlichen Merkmal, z.B. eine Klasse, versiehst. Elternelemente anhand des Auftretens bestimmter Kindelemente oder anhand von Merkmalen der Kindelemente zu selektieren, ist mir CSS leider nicht möglich.

Tschö, Auge

[Matthias Apsel]

Hallo Auge,

Das geht nur, wenn du genau weißt welches li gemeint ist (':nth-child()') oder du die entsprechenden li mit einem zusätzlichen Merkmal, z.B. eine Klasse, versiehst. Elternelemente anhand des Auftretens bestimmter Kindelemente oder anhand von Merkmalen der Kindelemente zu selektieren, ist mit CSS leider nicht möglich.

:last-child existiert

Bis demnächst
Matthias

[Tim(m)y]

Hallo Matthias

:last-child existiert

Aber wie kann ich ein :last-child einbauen, dann bekomme ich doch nur das letzte LI? Oder verstehe ich da was nicht?

[Auge]

Hallo

:last-child existiert

Aber wie kann ich ein :last-child einbauen, …

Na, wie man das halt macht. ;-)

… dann bekomme ich doch nur das letzte LI?

Das ist korrekt.

Oder verstehe ich da was nicht?

Nö, passt schon. :last-child hilft in deinem Fall nicht, oder, wenn doch, dann nur zufällig.

Wie Gunnar ausführt, soll es zukünftig möglich sein, ein Element anhand des Auftretens eines Nachfahrenelements auszuwählen (bei dir: li wenn Kind = ul). Nur leider wird das bisher nicht von den Browsern unterstützt. Nicht einmal Can I use? kennt bei Erstellung dieses Postings :has.

Du wirst vorerst also nicht um die Klassifizierung der betreffenden Elemente herumkommen.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Du wirst vorerst also nicht um die Klassifizierung der betreffenden Elemente herumkommen.

Welche man durchaus JavaScript überlassen kann.

In jQuery ein Einzeiler: $('li:has(ul)').addClass('has-ul');

LLAP 🖖

[TS]

Hallo und guten Tag,

:last-child existiert

Aber wie kann ich ein :last-child einbauen, dann bekomme ich doch nur das letzte LI? Oder verstehe ich da was nicht?

Doch, das verstehst Du richtig.
Mit CSS ist das derzeit nicht möglich, da ja nach dem Element ul auch noch weitere li des aktuellen Elternelementes kommen können.

Aber Du setzt mMn am falschen Hebel an. Den logischen Fehler im CSS kannst Du doch sicherlich durch deine API ausgleichen, indem Du genau diesen li-Elementen, die ul-Elemente enthalten, eine bestimmte Klasse gibst. Gunnar mag sich dabei vielleicht im Kreise drehen, aber ich denke da eher pragmatisch.

Und mit Javascript kannst due Elemente auf jeden Fall identifizieren. Es sind immer Parents von ul, vorausgesetzt, das markup stimmt. Aber auch das kannst Du dann prüfen.

Grüße
TS

[Der Martin]

Mahlzeit,

Das geht nur, wenn du genau weißt welches li gemeint ist (':nth-child()') oder du die entsprechenden li mit einem zusätzlichen Merkmal, z.B. eine Klasse, versiehst. Elternelemente anhand des Auftretens bestimmter Kindelemente oder anhand von Merkmalen der Kindelemente zu selektieren, ist mit CSS leider nicht möglich.

:last-child existiert

ja schon, hilft aber nicht. Denn auch :last-child selektiert nicht anhand von Kindelementen, sondern es selektiert ein Element, das selbst letztes Kind seines Elternelements ist.

Insofern schließe ich mich Auge an: Das ist derzeit mit CSS nicht möglich.

So long,
 Martin

[Matthias Apsel]

Hallo Der Martin,

:last-child existiert

ja schon, hilft aber nicht.

In der Tat. Lesen hilft.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Auge

Das geht nur, wenn du genau weißt welches li gemeint ist (':nth-child()') oder du die entsprechenden li mit einem zusätzlichen Merkmal, z.B. eine Klasse, versiehst. Elternelemente anhand des Auftretens bestimmter Kindelemente oder anhand von Merkmalen der Kindelemente zu selektieren, ist mir CSS leider nicht möglich.

Du hast da ein paar Wörter vergessen:

Das geht momentan nur, wenn du genau weißt, welches li gemeint ist (:nth-child()) oder du die entsprechenden li mit einem zusätzlichen Merkmal, z.B. einer Klasse, versiehst. Elternelemente anhand des Auftretens bestimmter Kindelemente oder anhand von Merkmalen der Kindelemente zu selektieren, ist mit CSS leider noch nicht möglich.

Aber zukünftig: li:has(ul)

LLAP 🖖

[woodfighter]

Tach,

Aber zukünftig: li:has(ul)

weißt du mehr darüber, ob das diesmal tatsächlich im Standard drin bleiben wird; bisher hatten die Browserhersteller ja immer gute Argumente dagegen einzuwenden?

mfg
Woodfighter

[Gunnar Bittersmann]

@@woodfighter

Aber zukünftig: li:has(ul)

weißt du mehr darüber, ob das diesmal tatsächlich im Standard drin bleiben wird; bisher hatten die Browserhersteller ja immer gute Argumente dagegen einzuwenden?

Hab am Rande der W3C TAG Q&A panel session dazu Peter Linss und David Baron befragt.

Antwort: Noch hat niemand :has() effizient implementiert. Möglicherweise wird das auch nicht geschehen und nie Einzug in Browser halten.

Was nicht zwangläufig heißt, dass es aus der CSS-Spec verschwinden wird, da andere Anwendungen denkbar sind, bei denen es nicht auf Echtzeit-Rendering ankommt.

LLAP 🖖

PS: Hab kein Selfie mit Tim Berners-Lee gemacht. Wozu hat man denn Freunde? ;-)

[Tabellenkalk]

Hallo,

Ich möchte in ein Liste nur jedes LI ansprechen das vor einem UL steht.

Da ja nun geklärt ist, dass das momentan nicht geht: vielleicht reicht es dir das UL zu selektieren, das im LI steht?

LI > UL { color:green; }

Gruß
Kalk