Die ersten oder letzten n-Elemente mit :nth-child() und :nth-last-child() selektieren

Die erste oderletzten n-Elemente selektieren

Es kann vorkommen, dass man nicht nur das erste oder letzte Elemente speziell stylen muss, sondern beispielsweise die ersten oder letzten zwei. Mein erster Gedanke wäre das mit Javascript oder PHP zu lösen, aber es ist auch mit CSS möglich.

Den meisten sind die Pseudoklassen :first-child, :last-child und :nth-child wahrscheinlich geläufig. Mit :nth-child kann man ein bestimmtes Element selektieren, jedes n-te beginnend beim 0ten oder jedes n-te beginnend bei einem bestimmten Element.

/* Das dritte Element */
li:nth-child(3) {
    font-weight: 900;
}

/* Jedes vierte Element */
li:nth-child(4n) {
    color: #d25b4b;
}

/* Jedes vierte beginnend beim 2. Element */
li:nth-child(4n + 2) {
    color: #67b352;
}

Das Live-Beispiel zu :nth-child findest du hier.

:nth-child bietet noch eine weitere Möglichkeit Elemente anzusprechen. Mit (-n+ZAHL) kann man definieren, dass alle Elemente beginnend beim ersten bis zu einem bestimmten Element ausgewählt werden sollen.

/* Die ersten drei Elemente orange einfärben */
li:nth-child(-n+3) {
    color: #d25b4b;
}

Macht man genau das gleiche mit :nth-last-child, kann man alle Elemente zwischen einem bestimmten und dem letzten Element selektieren.

/* Die letzten zwei Elemente fett darstellen */
li:nth-last-child(-n+2) {
    font-weight: 900;
}

Das Live-Beispiel zu :nth-child(-n+3) und :nth-last-child(-n+2) findest du hier.

Es bedarf also keiner serverseitigen oder Javascript-Lösung mehr, um die ersten oder letzten n-Element anzusprechen. Zu beachten ist nur, dass :nth-child erst ab IE 9 funktioniert.

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *