CSS nth-child – Zählen und berechnen

E:nth-child(n)

:nth-child(n) wählt Elemente nach ihrer Position innerhalb des Eltern-Elements. Der Selektor basiert also nicht auf Klassen, IDs oder Inhalt, sondern fragt: »Liegt hier das 1., 2., 3., … Kind von seines Elternelements vor?

: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 }

: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; }

Formel für nth-child: :nth-child(an + b)

• a Schrittweite (wie oft wiederholt sich das Muster?)
• n Laufvariable (0, 1, 2, …)
• b Startposition (Offset)

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
}

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;
}

E:nth-last-child(n)

wie nth-child, aber beginnt am Ende

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

nth-of-type(n)

:nth-child() bezieht sich immer auf alle Kinder des Elternelements → wenn nur <li>-Elemente angesprochen werden sollen, aber dazwischen ein <span> sitzt, verschiebt sich die Zählung. Dafür gibt’s :nth-of-type(), das nur gleiche Tags berücksichtigt.

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>

:nth-of-type() berücksichtigt nur gleiche Elemente und wird sehr mächtig in Kombination mit :not():

li:not(:nth-child(3n)) { color: tomato; }

• Eins
• Zwei
• Drei
• Vier
• Fünf
• Sechs
• Sieben
• Acht
• Neun

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}