Tim(m)y: nur jedes LI vor einem UL ansprechen

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>
  1. 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

    --
    Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
    Terry Pratchett, „Gevatter Tod“
    1. 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

      --
      Signaturen sind bloed (Steel) und Markdown ist mächtig.
      1. 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?

        1. 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

          --
          Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
          Terry Pratchett, „Gevatter Tod“
          1. @@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 🖖

            --
            Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
        2. 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

      2. 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

        1. Hallo Der Martin,

          :last-child existiert

          ja schon, hilft aber nicht.

          In der Tat. Lesen hilft.

          Bis demnächst
          Matthias

          --
          Signaturen sind bloed (Steel) und Markdown ist mächtig.
    2. @@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 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      1. 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

        1. @@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? ;-)

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
  2. 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