dedlfix: nth-child unterschiedlich behandeln bei gerader und ungerader Anzahl

Beitrag lesen

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.

akzeptierte Antworten