Wenn vorletztes <li class="current">, soll letztes <li> roten Text haben

[Manfred K.]

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

[at]

Hallo Manfred,

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

MfG, at

[marctrix]

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

[Manfred K.]

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

[marctrix]

Hej Manfred,

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

Keine Ursache, viel Spaß mit dem +

Marc

[at]

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

[marctrix]

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

[MudGuard]

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

[marctrix]

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

[Christian Kruse]

Hallo marctrix,

jetzt noch mal komplett in richtig

CSS

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

😂

LG,
CK

[marctrix]

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

[Christian Kruse]

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

[Gunnar Bittersmann]

@@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 🖖

[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?

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

Tschö, Auge

[marctrix]

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

[marctrix]

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

[Tabellenkalk]

Hallo,

manche Seelen in meiner Brust

Vieelicht sind auch bloß manche Finger schneller als andere…

Gruß
Kalk

[Gunnar Bittersmann]

@@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 🖖

[at]

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

[Gunnar Bittersmann]

@@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 🖖

[at]

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

[Gunnar Bittersmann]

@@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 🖖

[marctrix]

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

[Gunnar Bittersmann]

@@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 🖖

[marctrix]

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