CSS nth-child – Zählen und berechnen

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

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
}

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>

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}