Nützliche :nth-child-Rezepte

Ich werde ein wenig aufgeregt, wenn ich auf perfekte Anwendungen für :nth-child oder :nth-of-type stoße (lesen Sie über den Unterschied). Je besser Sie sie verstehen, desto mehr CSS-Nerdrgasmen können Sie erleben!

In diesen einfachen „Rezepten“ (eigentlich: Ausdrücken) werde ich willkürlich eine flache Liste von Listenelementen und zufällig ausgewählte Zahlen verwenden. Aber es sollte ziemlich offensichtlich sein, wie man sie ändert, um ähnliche Auswahlen zu erzielen.

Nur das fünfte Element auswählen

li:nth-child(5) {
    color: green;   
}

Um das erste Element auszuwählen, können Sie :first-child verwenden, oder ich wette, Sie können erraten, wie Sie das obige ändern können, um dies ebenfalls zu tun.

Alle bis auf die ersten fünf auswählen

li:nth-child(n+6) {
    color: green;   
}

Wenn es hier mehr als 10 Elemente gäbe, würden alle über 5 ausgewählt werden.

Nur die ersten fünf auswählen

li:nth-child(-n+5) {
    color: green;   
}

Jeden vierten auswählen, beginnend mit dem ersten

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

Nur ungerade oder gerade auswählen

li:nth-child(odd) {
    color: green;   
}

li:nth-child(even) {
    color: green;   
}

Das letzte Element auswählen

li:last-child {
    color: green;
}

Wählt die 10. aus, da wir hier 10 Elemente haben, aber wenn es 8 gäbe, würde es die 8. auswählen, oder wenn es 1.290 gäbe, würde es die 1.290. auswählen.

Das vorletzte Element auswählen

li:nth-last-child(2) {
    color: green;
}

Wählt die 9. aus, da wir hier 10 Elemente haben, aber wenn es 30 Elemente gäbe, würde es die 29. auswählen.

Willst du spielen?

Probieren Sie den Tester aus.

Browser-Unterstützung

Interessanterweise wurde :first-child von IE 7 unterstützt, aber erst ab IE 9 werden die restlichen Elemente unterstützt. Abgesehen von IE gibt es kaum Bedenken hinsichtlich der Browserunterstützung, und wenn Sie sich um IE sorgen, dann verwenden Sie Selectivizr. Wenn Browserunterstützung für Sie interessant oder wichtig ist, schauen Sie sich unbedingt When can I use… an, das diese Dinge sehr gut verfolgt.