Bestimmtes Child-Element ansprechen

Ein Überblick der meist verwendeten Pseudoselektoren um ein bestimmtes Kindelement anzusprechen.

Erstes Element.

.className:first-child{...}

Letztes Element.

.className:last-child{...}

Element drei und vier

.className:nth-child(3), .className:nth-child(4){...}

Gerade und ungerade z.B. bei Tabellenzeilen.

.className:nth-child(odd){  /* ungerade */ }
.className:nth-child(even){  /* gerade */ }

Jedes dritte und vierte Element.

.className:nth-child(3n), .className:nth-child(4n){...}

Jedes dritte Element beginnend ab dem vierten Element.

.className:nth-child(3n+4){...}

Soll z.B. der erste p Tag angesprochen werden, davor befindet sich aber noch ein anderes Element, funktioniert es mit p:first-child nicht. Hier sollte nth-of-type eingesetzt werden.

.parentClassName p:nth-of-type(1){...}