Gunnar Bittersmann: Probleme mit Abständen (nth-child)

Beitrag lesen

@@Rene3.1

ich würde gerne nur die <article>-Elemente (minimum: 1, maximum: 2) in der letzten Reihe ansprechen.

In einer Reihe stehen bei dir ein oder zwei Elemente. Bei einer geraden Gesamtzahl an Elementen ist die letzte Reihe mit zwei Elementen gefüllt; bei einer ungeraden Gesamtzahl steht in der letzten Reihe nur ein Element.

Du willst also bei gerader Gesamtzahl die letzten beiden Elemente selektieren; bei ungerader Gesamtzahl nur das letzte. Anders gesagt: Du willst immer das letzte Element selektieren und bei gerader Gesamtzahl zusätzlich noch das vorletzte.

Noch anders gesagt: Du willst das letzte Element selektieren sowie das vorletzte, wenn dieses ein ungerades Element ist. Das kann man mit Selektoren machen:

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

Statt …-child auch gern …-of-type.

Mehr dazu in Quantity Queries for CSS von Heydon Pickering auf A List Apart.


Aber eigentlich willst du etwas ganz anderes: Den Kram mit Floats sein lassen und Flexbox oder CSS Grid verwenden.

Nachtrag: Beispiel Flexbox vs. Grid

LLAP 🖖

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