Manfred K.: Wenn vorletztes <li class="current">, soll letztes <li> roten Text haben

Geht sowas idealerweise per CSS (LESS) oder nur per JavaScript/jQuery?

  1. Hallo Manfred,

    in CSS übersetzt sieht das etwa so aus: li.current:nth-last-child(2) + li { color: red; }

    MfG, at

    1. Hej at,

      in CSS übersetzt sieht das etwa so aus: li.current:nth-last-child(2) + li { color: red; }

      Noch ein (bisschen) hübscher:

      li**[aria-current]**:nth-last-child(2) + li {color red;}

      Und vermutlich möchte man nicht das li selbst, sondern den darin enthaltenen Link gestalten. Dann wäre es so was:

      li[aria-current]:nth-last-child(2) + li **a** {color red;}

      @manfredk Erklärung gewünscht?

      Marc

      1. Super, das + kann ich noch nicht in CSS. Danke Euch!

        1. Hej Manfred,

          Super, das + kann ich noch nicht in CSS. Danke Euch!

          Keine Ursache, viel Spaß mit dem +

          Marc

      2. Hallo marctrix.

        Noch ein (bisschen) hübscher:

        li**[aria-current]**:nth-last-child(2) + li {color red;}

        Beim hervorheben von Code-Passagen kommt Kramdown offenbar an seine Grenzen und erzeugt unerwünschten Weißraum. – Dass diese Schreibweise gar nicht funktioniert, ist ja ersichtlich, aber leider ergibt auch die umgekehrte Verschachtelung nicht das gewünschte Ergebnis. So führt `li`**`[aria-current]`**`:nth-last-child(2) + li {color red;}` leider zu diesem Ergebnis: li[aria-current]:nth-last-child(2) + li {color red;}

        Und vermutlich möchte man nicht das li selbst, sondern den darin enthaltenen Link gestalten. Dann wäre es so was:

        li[aria-current]:nth-last-child(2) + li **a** {color red;}

        @manfredk Erklärung gewünscht?

        Nur vielleicht der Hinweis für die Allgemeinheit, dass dieser Selektor nicht zum angegebenen HTML passt, sondern zum folgenden:

        <li role="aria-current">vorletzter Listenpunkt</li>
        <li><a href="https://example.org/">letzter Listenpunkt</a></li>
        

        MfG, at

        1. Hej at,

          Noch ein (bisschen) hübscher:

          li**[aria-current]**:nth-last-child(2) + li {color red;}

          Beim hervorheben von Code-Passagen kommt Kramdown offenbar an seine Grenzen und erzeugt unerwünschten Weißraum.

          Danke für die Korrektur - war mir nicht aufgefallen irgendwie...

          Nur vielleicht der Hinweis für die Allgemeinheit, dass dieser Selektor nicht zum angegebenen HTML passt, sondern zum folgenden:

          <li role="aria-current">vorletzter Listenpunkt</li>
          <li><a href="https://example.org/">letzter Listenpunkt</a></li>
          

          Das hatte ich sagen wollen, aber vergsssen. Auch hierfür Danke, sonst hätte der Post überhaupt keinen Sinn ergeben!

          Marc

          1. Hi,

            li[aria-current]:nth-last-child(2) + li {color red;}

            Nur vielleicht der Hinweis für die Allgemeinheit, dass dieser Selektor nicht zum angegebenen HTML passt, sondern zum folgenden:

            <li role="aria-current">vorletzter Listenpunkt</li>
            <li><a href="https://example.org/">letzter Listenpunkt</a></li>
            

            nein, dazu paßt er auch nicht - er würde zu <li aria-current="irgendwas"> passen.

            Es müßte li[role='aria-current'] usw. heißen.

            cu,
            Andreas a/k/a MudGuard

            1. Hej MudGuard,

              jetzt noch mal komplett in richtig

              CSS

              li[aria-current]:nth-last-child(2) + li {color red;}
              

              HTML

              <ul>
                <li><a href="link-to-foo">foo</a></li>
                <li><a href="link-to-bar">bar</a></li>
                <li><a href="link-to-baz" aria-current="page">baz</a></li>
                <li><a href="link-to-bla">bla</a></li>
              </ul>
              

              Mann, war das eine schwere Geburt…

              Statt [aria-current] würde natürlich auch [aria-current="page"] funktionieren. Ich meine aber an dieser Stelle nicht weiter spezifizieren zu müssen; es handelt sich auch so schon um einen sehr spezifischen Selektor…

              Danke @at und @MudGuard — ich kann falsche Beispiele nicht leiden, insbesondere, wenn sie von mir sind…

              Marc

              1. Hallo marctrix,

                jetzt noch mal komplett in richtig

                CSS

                li[aria-current]:nth-last-child(2) + li {color red;}
                

                😂

                LG,
                CK

                1. Hej Christian,

                  Hallo marctrix,

                  jetzt noch mal komplett in richtig

                  CSS

                  li[aria-current]:nth-last-child(2) + li {color: red;}
                  

                  😂

                  Weiß gar nicht, was es da so dämlich zu grinsen gibt!!!einself!1!!1

                  Können wir einen Syntax-Checker bekommen in Version 5.0?

                  Marc

                  1. Hallo marctrix,

                    Können wir einen Syntax-Checker bekommen in Version 5.0?

                    Was meinst du, warum das color red rot hinterlegt war? 😝 der Hochlichter hat das als Fehler erkannt.

                    LG,
                    CK

                    1. @@Christian Kruse

                      Was meinst du, warum das color red rot hinterlegt war? 😝 der Hochlichter hat das als Fehler erkannt.

                      Wobei man sagen muss, dass nicht alles, was der Hochlichter rot hinterlegt, auch tatsächlich Fehler sind. Bei so vielen false positives ist’s kein Wunder, wenn Nutzer das ignorieren. 😏

                      LLAP 🖖

                      --
                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                  2. Hallo

                    Können wir einen Syntax-Checker bekommen in Version 5.0?

                    Ist die rote Markierung von color red; in der Vorschau (die gleiche, die nachher auch im Posting zu sehen ist) nicht Checking genug?

                    bla {color red;}
                    bla {color: red;}
                    

                    Tschö, Auge

                    --
                    Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                    Toller Dampf voraus von Terry Pratchett
                    1. Hej Auge,

                      Hallo

                      Können wir einen Syntax-Checker bekommen in Version 5.0?

                      Ist die rote Markierung von color red; in der Vorschau (die gleiche, die nachher auch im Posting zu sehen ist) nicht Checking genug?

                      Doch - ich hatte es nur nciht verstanden - diesen Teil des Codes hatte ich einfach übernommen und dass der Syntaxhighlighter property und value rot markierte, hatte ich für das üblihce Highlighting gehalten…

                      Ich gehe jetzt dann mal in die Ecke zum schämen…

                      Marc

                      1. Hej marctrix,

                        Doch - ich hatte es nur nciht verstanden - diesen Teil des Codes hatte ich einfach übernommen und dass der Syntaxhighlighter property und value rot markierte, hatte ich für das üblihce Highlighting gehalten…

                        Und Orthografie halten manche Seelen in meiner Brust für generell überbewertet, wie man unschwer erkennt…

                        Marc

                        1. Hallo,

                          manche Seelen in meiner Brust

                          Vieelicht sind auch bloß manche Finger schneller als andere…

                          Gruß
                          Kalk

            2. @@MudGuard

              Es müßte li[role='aria-current'] usw. heißen.

              … damit der Selektor wirkt zum unsinnigen Markup passt.

              Nicht das CSS bedarf einer Korrektur, sondern das HTML.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            3. Hallo MudGuard,

              nein, dazu paßt er auch nicht - er würde zu <li aria-current="irgendwas"> passen.

              Es müßte li[role='aria-current'] usw. heißen.

              Stimmt. Was schon daran liegt, dass aria-current kein Attributwert von role ist, sondern ein Attribut. Den Unterschied erkennt man sehr gut im Beispiel 2.

              MfG, at

    2. @@at

      in CSS übersetzt sieht das etwa so aus: li.current:nth-last-child(2) + li { color: red; }

      Auf der sicheren Seite ist man mit li.current:nth-last-of-type(2) ~ li { color: red }

      Zur Klasse "current" gilt das bereits Gesagte: wenn man stattdessen aria-current verwendet (damit assistive Technologien was davon haben), dann braucht man die Klasse nicht.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Hallo Gunnar.

        in CSS übersetzt sieht das etwa so aus: li.current:nth-last-child(2) + li { color: red; }

        Auf der sicheren Seite ist man mit li.current:nth-last-of-type(2) ~ li { color: red }

        Sicherer im Sinne von wenn das HTML nicht valide ist?

        MfG, at

        1. @@at

          in CSS übersetzt sieht das etwa so aus: li.current:nth-last-child(2) + li { color: red; }

          Auf der sicheren Seite ist man mit li.current:nth-last-of-type(2) ~ li { color: red }

          Sicherer im Sinne von wenn das HTML nicht valide ist?

          Sicherer im Sinne von: wenn zwischen dem vorletzten und dem letzten li andere valide Elemente sind.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. Hej Gunnar,

            @@at

            Sicherer im Sinne von: wenn zwischen dem vorletzten und dem letzten li andere valide Elemente sind.

            Welche könnten das sein in einer Liste?

            Es wäre wohl im Gegenteil besser, solche Fehler sichtbar zu machen (ggfs. nur in einem Debug-Stylesheet), um das vermutlich anders als gewünscht gebaute HTML erkennbar zu machen.

            Marc

            1. @@marctrix

              Sicherer im Sinne von: wenn zwischen dem vorletzten und dem letzten li andere valide Elemente sind.

              Welche könnten das sein in einer Liste?

              Wenn ich am Laptop wäre, würde ich dir die Spec verlinken. Bin ich aber nicht. Du wirst es finden.

              Hatten wir auch letztens erst.

              Es wäre wohl im Gegenteil besser, solche Fehler sichtbar zu machen (ggfs. nur in einem Debug-Stylesheet), um das vermutlich anders als gewünscht gebaute HTML erkennbar zu machen.

              Ich muss mein Test-Stylesheet mal anpassen.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Hej Gunnar,

                @@marctrix

                Sicherer im Sinne von: wenn zwischen dem vorletzten und dem letzten li andere valide Elemente sind.

                Welche könnten das sein in einer Liste?

                Wenn ich am Laptop wäre, würde ich dir die Spec verlinken. Bin ich aber nicht. Du wirst es finden.

                Du meinst, dass jemand zwischen die einzelnen Listeneinträge Template oder Script einstreuen könnte?

                Das wäre meiner Ansicht nach auf jeden Fall Absicht, und wenn man weiß was man tut, muss man sich auch nicht „für alle Fälle“ absichern. Andererseits bemühe ich mich auch, mein CSS so zu schreiben, dass es unerwartete Dinge abfängt.

                Vielleicht eine Überlegung wert - auch wenn es mir weit hergeholt erscheint, es schadet ja nicht, das so zu schreiben.

                Marc