Webentwicklung & Datenanalyse

CSS-Pseudoelemente für Listenstylings nutzen

Lesezeit: Weniger als 1 Minute

Im letzten Beitrag habe ich gezeigt, wie man in Wordpress mit Hilfe einer individuellen Abfrage Eine Liste mit Buch-Neuerscheinungen, geordnet nach Monaten, anzeigen lassen kann. Wie man diese mit Pseudo-Elementen noch optimieren kann, zeigt dieser Beitrag.

Als Beispiel dient zunächst wieder diese Liste:

Bücher nach Erscheinungsjahr geordnet
Bücher nach Erscheinungsjahr geordnet Bild Vergrößern

Hier werden verschiedene Bücher ausgegeben, geordnet nach ihrem Erscheinungsmonat. Dieser ist als benutzerdefiniertes Feld an jedem Artikel gespeichert mit einer Zahl von 01 bis 12. Nun möchte ich, dass den Büchern wie im Screenshot zu sehen jeweils auch immer der Monat vorangestellt wird, in dem sie erscheinen. Dazu nutze ich zunächst das benutzerdefinierte Feld selbst um für jeden Bucheintrag eine Klasse zu erzeugen.

<li class="monat_<?php echo get_post_meta($post->ID, 'monat', true); ?>">

Für ein Buch, das im Januar erschienen ist, wird damit folgender Code ausgegeben:

<li class="monat_01">

Nun kann ich jedem Eintrag als Pseudoelement den Monatsnamen voranstellen:

ul > li.monat_01::before {
    content: 'Januar';
}
// und das dann für alle anderen elf Monate wiederholen...

Damit erhält allerdings jedes Buch den jeweiligen Erscheinungsmonat als Titel. In der Liste soll dieser aber jeweils nur ein Mal, über dem ersten Buch des jeweiligen Monats, platziert werden. Hierzu gibt es die Möglichkeit, alle anderen Überschriften außer die erste auszublenden:

ul > li.monat_01 ~ li.monat_01::before {
    content: '';
    display: none;
}
// und das dann für alle anderen elf Monate wiederholen...

Nun sieht die Liste aus wie im obigen Screenshot!

Profilbild
Autorin: Friederike

Hallo, ich bin Friederike. Ich entwickle Websites und schreibe auf krempin.it darüber. Außerdem mag ich Japanische Literatur und Retro-Videospiele.