Man kennt das ja: Eine Reihe von Informationen, sei es als Liste oder Tabelle, soll ausgegeben werden, am besten dynamisch und gut lesbar sein. Bei mehr als fünf Elementen werden alternierende Hintergrundfarben hilfreich. Der erste Gedanke könnte eine Modulo-Abfrage sein – doch warum programmieren, wenn CSS das kann?
Nicht nur für solche Spielereien sind sogenannte Pseudoklassen gut zu benutzen und es lohnt, sich damit zu beschäftigen. Sehen wir uns ein paar praktische Beispiele an:
1. Die Klassiker
Ohne groß darüber nachzudenken, stylen wir alle a-Tags mit :link, :active, :hover oder :visited. Da dies quasi Handwerkszeug ist, soll hierzu auch nicht viel gesagt werden. Zu den etwas fortgeschritteneren Techniken gehören da schon die ebenfalls bekannten Pseudoklassen ::after und ::before. Nach oder vor einem bestimmten Element kann damit ein Content eingefügt werden. Häufig trifft man für die Darstellung der Pfadnavigation auf diese Auszeichnung:
<html>
<head>
<style>
.breadcrumb::before {
content: "Sie befinden sich hier: ";
}
</style>
</head>
<body>
<div class="breadcrumb"><a href="#">Start</a>
</body>
</html>
2. Alternierende Zeilen mit nth-child
Über die Pseudoklasse nth-child können zum Beispiel Tabellen eine alternierende Hintergrundfarbe erhalten. Die Tabelle selbst wird in HTML ganz klassisch mit <table><tr><td></td></tr></table> erzeugt. In der Stylesheet-Datei kann nun die Tabellenzeile tr gestylt werden: Die erste Zeile soll schwarz mit weißem Text sein, die nächste Zeile weiß mit schwarzem Text und so fort.
Die Überlegung, :nth-child(2) würde zum Ziel führen, enttäuscht zunächst, da mit dieser Parameterangabe nur das 2. Element eine spezielle Auszeichnung erhalten würde. Als Parameter kann aber auch eine Formel übergeben werden. Diese lautet allgemein „[x]n+[y]“. [x] steht dabei für „jedes x-te Element“, [y] für den Versatz, ab dem die Formel greifen soll. Um im Beispiel jedem 2. Element ein spezielles Aussehen zu verleihen, kann also die Formel „2n+0“ verwendet werden:
tr:nth-child(2n+1) { background-color: #000; color: #111; }
tr:nth-child(2n+0) { background-color: #fff; color: #000; }
Die Formel als Parameter ist natürlich insbesondere dann spannend, wenn etwa jedes dritte, vierte oder x-Element eine spezielle Auszeichnung erhalten soll. Für die klassische Alternierung ist das schon fast etwas zu viel des guten, denn hier können als Parameter „odd“ für Elemente mit ungeradem Index genutzt werden (also erste, dritte, fünfte, … Zeile) und „even“ für Elemente mit geradem Index (also jede 2. Zeile).
tr:nth-child(odd) { background-color: #000; color: #fff; }
tr:nth-child(even) { background-color: #fff; color: #000; }
3. Einzelne Elemente ansprechen
Es gibt natürlich noch jede Menge weitere spannenden Pseudoklassen: Das letzte Element etwa könnte mit :last-child kenntlich gemacht werden, entsprechend das erste Element mit :first-child. Ergänzend zum weiter oben angesprochenen :nth-child(2) kann aber nicht nur das 2. Element von vorn, sondern auch das 2. Element von hinten angesprochen werden, mit :nth-last-child(2).
Typographisch interessant kann es sein, stets den ersten Buchstaben eines Textes anders darzustellen, wie man es aus diversen Zeitschriften oder Büchern kennt, was mit :first-letter gelingt.
Eine recht gute Übersicht zu den Pseudoklassen und Selektoren findet sich übrigens unter www.w3schools.com.