Mit nth-child Macht über die Style-Sheets erlangen
Kommentare

Die Arbeit mit CSS kann manchmal ein wenig unübersichtlich werden. Insofern ist man über jede Hilfe dankbar, die dazu beiträgt den Überblick zu bewahren, so dass man den roten Faden auch dann nicht

Die Arbeit mit CSS kann manchmal ein wenig unübersichtlich werden. Insofern ist man über jede Hilfe dankbar, die dazu beiträgt den Überblick zu bewahren, so dass man den roten Faden auch dann nicht verliert wenn der Quellcode mal wieder länger ausfällt als ursprünglich geplant. Ein solcher praktischer Helfer ist das Attribut nth-child. Mit Hilfe dieses CSS-Selectors kann man ungeordneten Listen ihren Schrecken nehmen, indem man mittels einiger einfacher Selektoren genau angibt, welche Elemente jeweils aus einer Liste ausgewählt werden sollen. Im Folgenden präsentieren wir Euch eine Übersicht über die wichtigsten Funktionen von nth-child.

Die einfachste Version ist der Selektor nth-child (Zahl). Gibt man z.B. ein :nth-child (8) wird damit einfach das achte Element aus der Liste ausgewählt. Durchaus nützlich, aber manchmal wünscht man sich mehr Flexibilität. Aus diesem Grund bietet nth-child auch die Arbeit mit Zahlenräumen an. Ein Beispiel zur Verdeutlichung. Der Selektor :nth-child (n+5) wählt das fünfte Element einer Liste, sowie alle darauffolgenden Elemente aus. Damit erspart man sich eine Menge Zeit, da man somit nicht mühsam alle Listenpunkte einzeln eingeben muss. Das ganze funktioniert auch umgekehrt: Mit :nth-child (-n+7) wählt man das siebte und die darunterliegenden Elemente aus.

Dazu bietet einem nth-child die Möglichkeit Bandbreiten anzugeben. So kann man mit dem Selektor nth-child (n+3): nth-child (-n+9) festlegen, dass alle Elemente von 3 bis 9 ausgewählt werden. Soweit hat man schon eine ganze Reihe von Optionen mit denen man sich die Arbeit erleichtern kann. Nth-child geht aber noch weiter. Man kann nämlich noch auswählen, ob man gerade oder ungerade Elemente aus einer bestimmten Bandbreite auswählt. Der Befehl nth-child(n+4):nth-child(odd):nth-child(-n+12) gibt z.B. an, dass man aus der Spanne 4 bis 12 nur die ungeraden Elemente auswählt. Ersetzt man das „odd“ durch „even“ werden stattdessen die geraden Elemente gewählt.

Mit diesen Selektoren deckt man eine breite Auswahl von Möglichkeiten ab. Wer es noch genauer möchte sei auf folgendes Tutorial verwiesen. Auf der Seite findet man noch einmal alle hier besprochenen Selektoren, sowie einige zusätzliche Funktionen. Damit ist man dann wirklich für alle Fälle gerüstet.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -