nth-child unterschiedlich behandeln bei gerader und ungerader Anzahl

[dedlfix]

Tach!

Gegeben sei eine Auflistung von Elementen. Nun wird die Liste sehr lang aber auch schmal, wenn es viele sind. Deswegen möchte ich zwei (oder auch drei) nebeneinander platzieren. Soweit kein Problem. Nun kommen da aber noch runde Ecken am Anfang und am Ende ins Spiel. Bei einer langen Liste ist das kein Problem, dank :first-child und :last-child. In Zweierreihe platziert muss nun aber das erste und das zweite (:first-child und :nth-child(2)) unterschiedlich behandelt werden und die beiden letzten auch.

Das Problem ergibt sich erst, dass die Elemente mal eine gerade mal eine ungerade Anzahl sein können. Man bekommt dann entweder einen "glatten" Abschluss

├─────┼─────┤
│     │     │
╰─────┴─────╯

oder einen mit "Überhang".

├─────┼─────┤
│     │     │
├─────┼─────╯
│     │
╰─────╯

Und in beiden Fällen sind die Ecken unterschiedlich zu behandeln. Wie bekommt man in diesen beiden Fällen die betroffenen Elemente per CSS-Selektoren angesprochen? Geht das überhaupt?

Gesucht sind also die Selektoren für

• vorletztes Element bei gerader Anzahl
• vorletztes Element bei ungerader Anzahl
• letztes Element bei gerader Anzahl
• letztes Element bei ungerader Anzahl

oder auch allgemeiner formuliert

• n-t-letztes Element bei gerader Anzahl
• n-t-letztes Element bei ungerader Anzahl

Und, Zusatzfrage, kann man die Lösung auf ähnliche Weise für drei oder mehr Spalten anpassen? Das kann ich mir dann vermutlich auch selbst ableiten, falls es eine Lösung für das Zwei-Spalten-Problem gibt.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Gesucht sind also die Selektoren für

• vorletztes Element bei gerader Anzahl

:nth-last-child(2):nth-child(odd)

Ich glaube, die anderen kriegst du jetzt selber hin.

Du weißt auch, dass du mit Flexbox das letzte Element auf volle Breite bekommst, ohne zusätzliches CSS?

LLAP

[dedlfix]

Tach!

:nth-last-child(2):nth-child(odd)

Ich glaube, die anderen kriegst du jetzt selber hin.

Kombiniere: ich muss kombinieren. Manchmal kann es so einfach sein.

Du weißt auch, dass du mit Flexbox das letzte Element auf volle Breite bekommst, ohne zusätzliches CSS?

Passt hier nicht, weil dann das letzte Element die volle Breite annimmt. Man kann zwar den Inhalt auf 50% abzüglich Rechts-Padding rechnen, sieht aber auch nicht hübsch aus. Dann schon einer bei ungerader Anzahl ein leeres Listenelement einfügen.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Kombiniere: ich muss kombinieren. Manchmal kann es so einfach sein.

Elementar, lieber Watson.

Du weißt auch, dass du mit Flexbox das letzte Element auf volle Breite bekommst, ohne zusätzliches CSS? Passt hier nicht, weil dann das letzte Element die volle Breite annimmt.

Hätte ja sein können, dass das so gewünscht ist. Dann könnte man dem Containerelement den äußeren Rahmen und die runden Ecken geben.

Dann schon einer bei ungerader Anzahl ein leeres Listenelement einfügen.

?? Wozu? Und nein. Und wenn doch, dann ein Pseudoelement per CSS.

LLAP

[Der Martin]

Hallo,

Kombiniere: ich muss kombinieren. Manchmal kann es so einfach sein.

Elementar, lieber Watson.

mindestens einer von uns beiden verwechselt gerade die Detektiv-Legenden.

Ich war der Meinung, die "Kombiniere"-Selbstgespräche gehörten zu Nick Knatterton. Aber ich lese gerade, dass wohl auch Sherlock Holmes eine der Figuren war, die Manfred Schmidt inspiriert haben. Möglich, dass er diese Eigenheit da schon übernommen hat (ich bin kein Sherlock-Holmes-Kenner).

So long,
 Martin

[dedlfix]

Tach!

Dann schon einer bei ungerader Anzahl ein leeres Listenelement einfügen.

?? Wozu? Und nein. Und wenn doch, dann ein Pseudoelement per CSS.

Ich weiß nicht, welche Ausmaße das annehmen muss, deswegen nehm ich eins mit abgespecktem Dummy-Inhalt, der ähnlich der anderen Listenelemente ist und der visibility:hidden gesetzt bekommt. Die Breite ist wegen Grid gegeben, aber die Höhe nicht. Die müsste ich mit Javascript aus den anderen Listenelementen auslesen. Das ist im Gegensatz zum Dummy zu umständlich.

(Screenreader müssen nicht unterstützt werden. Nicht weil ich diese Geräte und deren Benutzer willentlich ausschließen möchte, aber sie sind einfach kein Zielpublikum für das Thema der Anwendung. Auch Suchmaschinen und andere Automaten können keinen verwertbaren Inhalt aus diesem Teil der Anwendung ziehen.)

dedlfix.