CSS nth-child(n) – 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; }

Klassen- und Id-Selektoren	Die ältesten und zuverlässigsten Selektoren
Pseudo-Elemente	Zustände von HTML-Elementen filtern
CSS Pseudo-Klassen	Besonders interessant für Listen und Tabellen
Attribut-Selektoren	Filtern HTML-Elemente anhand ihrer Attribute
Kontext-Selektoren	Wä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
}

Mo	29364	283	276	Mo	27836	272	290	Mo	21743	238	276
Di	45753	267	289	Di	36059	253	297	Di	30823	208	267
Mi	67186	273	282	Mi	69601	253	290	Mi	51301	198	255
Do	73209	229	282	Do	70611	194	295	Do	56677	183	250
Fr	74352	267	288	Fr	61288	228	285	Fr	50968	186	250
Sa	64346	246	288	Sa	53697	229	284	Sa	42813	181	238
So	42055	258	290	So	32646	241	297	So	29348	199	237

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>

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}

div