Struktur-Pseudoklassen

Struktur-Pseudoklassen wählen Elemente anhand ihrer Position innerhalb eines Elternelements aus. Sie sind besonders nützlich, wenn du Elemente gezielt stylen möchtest, ohne zusätzliche Klassen zu vergeben.

In den folgenden Beispielen ist <ol> das Elternelement. Die <li>-Elemente sind die Kindelemente.

1<ol>
2    <li>Apfel</li>
3    <li>Banane</li>
4    <li>Orange</li>
5    <li>Birne</li>
6    <li>Kiwi</li>
7</ol>

:first-child - Erstes Kindelement

:first-child wählt ein Element aus, wenn es das erste Kind seines Elternelements ist. Im Beispiel wird Apfel rot dargestellt.

1li:first-child {
2    color: red;
3}

:last-child - Letztes Kindelement

:last-child wählt ein Element aus, wenn es das letzte Kind seines Elternelements ist. Im Beispiel wird Kiwi blau dargestellt.

1li:last-child {
2    color: blue;
3}

:nth-child(n) - Bestimmtes Kindelement

:nth-child(n) wählt ein Element anhand seiner Position aus. Mit :nth-child(2) wird das zweite Kind ausgewählt. Im Beispiel ist das Banane.

1li:nth-child(2) {
2    color: orange;
3}

:nth-child(even) - Gerade Elemente auswählen

Mit :nth-child(even) werden alle Elemente mit gerader Position ausgewählt. Im Beispiel sind das Banane und Birne.

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

:nth-child(odd) - Ungerade Elemente auswählen

Mit :nth-child(odd) werden alle Elemente mit ungerader Position ausgewählt. Im Beispiel sind das Apfel, Orange und Kiwi.

1li:nth-child(odd) {
2    color: red;
3}

:nth-child(3n) - Jedes dritte Element auswählen

Mit :nth-child(3n) wird jedes dritte Element ausgewählt. Das betrifft das 3., 6., 9. Element und so weiter. Im Beispiel wird Orange blau dargestellt.

1li:nth-child(3n) {
2    color: blue;
3}

:nth-last-child(n) - Von hinten zählen

:nth-last-child(n) funktioniert ähnlich wie :nth-child(n), zählt aber von hinten. Mit :nth-last-child(2) wird das zweite Element von hinten ausgewählt. Im Beispiel ist das Birne.

1li:nth-last-child(2) {
2    color: red;
3}

:nth-of-type() - Zält nur Kindelemente eines bestimmten Typs

:nth-child() zählt alle Kindelemente innerhalb eines Elternelements. Dabei ist egal, welchen Elementtyp die Kinder haben.

:nth-of-type() zählt dagegen nur Elemente desselben Typs. Das ist hilfreich, wenn du zum Beispiel gezielt das zweite <p>-Element auswählen möchtest.

1<div>
2    <p>Absatz 1</p>
3    <h2>Überschrift</h2>
4    <p>Absatz 2</p>
5    <p>Absatz 3</p>
6</div>

1p:nth-child(2) {
2    color: red;
3}

1p:nth-of-type(2) {
2    color: purple;
3}

In diesem Beispiel würde p:nth-child(2) keinen Absatz auswählen, weil das zweite Kind ein <h2> ist. p:nth-of-type(2) wählt dagegen den zweiten Absatz aus.