CSS nth-child – Zählen und berechnen

Position eines Kind-Elements / Nachkommens

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.

23-02-02 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
}
Mo3642827 Mo2782729 Mo2172327
Di7532628 Di3602529 Di3082026
Mi1862728 Mi6962529 Mi5131925
Do2092228 Do7061929 Do5661825

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