CSS nth-child – Zählen und berechnen

Die CSS-Funktion nth-child(n) erreicht jedes n-te Kind eines übergeordneten Eltern-Elements, wobei n eine Zahl, ein Schlüsselword odd oder even (ungerade / gerade) oder eine Formel wie an + b sein kann.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

E:nth-child(n)

filtert das n-te Kindelement eines HTML-Elements

nth-child ist eine Pseudoklasse (einfacher Doppelpunkt) und steht immer am Ende der Selektor-Kette. Runde Klammern kennzeichnen eine CSS-Funktion: Vor der öffnenden runden Klammer darf kein Leerzeichen stehen.

li:nth-child(3) { background:blue }

E:nth-last-child(n)

wie nth-child, aber beginnt am Ende

li:nth-last-child(3) { background: blue }

:nth-child(odd), nth-child(even)

Tabellenzeilen lassen sich mit einem geringen Aufwand abwechselnd einfärben – das verbessert die Lesbarkeit in langen Tabellen.

tr:nth-child(odd) { background: gainsboro; }
tr:nth-child(even) { background: ivory; }
Klassen- und Id-SelektorenDie ältesten und zuverlässigsten Selektoren
Pseudo-ElementeZustände von HTML-Elementen filtern
CSS Pseudo-KlassenBesonders interessant für Listen und Tabellen
Attribut-SelektorenFiltern HTML-Elemente anhand ihrer Attribute
Kontext-SelektorenWählen HTML-Elemente anhand ihrer relativen Position innerhalb der Struktur

Formel für nth-child

Jede vierte Zelle in jeder Zeile einer Tabelle, beginend beim ersten Element (1, 5, 9, 13, 17, …).

.week td:nth-child(4n + 1) {
	background-color: #efefef
}
Mo29364283276 Mo27836272290 Mo21743238276
Di45753267289 Di36059253297 Di30823208267
Mi67186273282 Mi69601253290 Mi51301198255
Do73209229282 Do70611194295 Do56677183250
Fr74352267288 Fr61288228285 Fr50968186250
Sa64346246288 Sa53697229284 Sa42813181238
So42055258290 So32646241297 So29348199237

Wenn jedes dritte Element einer Reihe gefiltert werden soll, und zwar beginnend mit dem zweiten Element, liefert eine Formel das Element ans CSS.

a + ( n - 1 ) * d
|       |      |
|       |      +-- Abstand (»jedes 3. Element«)
|       |
|       +-- Multiplikator
|
+-- erstes Element (Beispiel beginnt beim 2. Element) 

  a + ( n - 1 ) * d
= 2 + ( n - 1 ) * 3
= 2 + ( 3n - 3)
= 2 + 3n - 3
= 3n - 1
li:nth-child(3n-1) {
	background: red;
}

nth-of-type(n)

wie nth-child, wirkt aber nur bei Elementen eines Typs. Auch hier gilt: n kann entweder eine Zahl für den Index, das Schlüsselwort odd oder even oder eine Formel sein.

p:nth-of-type(odd){
	background:orange
}
<div class="dbox">
	<ul>
		<li></li>
		<li></li>
	</ul>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<div></div>
	<div></div>
</div>
  • li
  • li

p

p

p

p

div
div

nth-last-of-type(n)

wie nth-of-type, aber zählt vom Ende an und wirkt nur bei einem bestimmten Typ von Element. Und natürlich auch hier: n kann entweder eine Zahl für den Index, das Schlüsselwort odd oder even oder eine Formel sein.

p:nth-last-of-type(3) {background:orange}
  • li
  • li

p

p

p

p

div
div