CSS: Das vorletzte, ungerade Element einer Liste anpassen

Wenn die Anzahl der Elemente in der Liste gerade ist, sollen die letzten beiden Elemente optisch angepasst werden. Bei ungerade Anzahl jedoch nur das letzte Element. So löst du das Problem mit nur vier Zeilen CSS.

Pseudoklassen zur Auswahl Elementen verwenden

css-last-child-even-odd
Links: Ungerade Anzahl, letztes Element markiert. Rechts: Gerade Anzahl, letztes und vorletztes Element markiert.

Als erstes wählst du das letzte Listenelement über Pseudoklasse li:last-child aus. Danach sprichst du mit li:nth-last-child(2) das vorletzte Element an. Jetzt hast du pauschal jedes letzte und vorletzte Element im Zugriff.

Wenn du den letzten Selektor um eine zweite Pseudoklasse erweiterst, kannst du die Auswahl auf ungerade, vorletzte Elemente einschränken: :nth-child(odd).

Das fertige Snippet für CSS Ausnahmeregeln

Mit diesem Snippet habe ich zum Beispiel die Trennstriche am Ende jedes Abschnitts aus der Definitionsliste des Artikels Deutsche Übersetzung der Yoast SEO Übergangswörter entfernt.

li:last-child,
li:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

Kopiere den Code in die style.css Datei deines Projekts und passe es bei Bedarf an.

Teile diesen Beitrag