CSS/Selektoren/Pseudoklasse/strukturelle Pseudoklasse/nth-child
Aus SELFHTML-Wiki
Mithilfe des Selektors :nth-child() ist es möglich, das n-te Kind eines Elternelementes zu selektieren. Der Selektor erwartet als Argument einen mathematischen Ausdruck, der einer arithmetischen Zahlenfolge mit ganzzahligen Koeffizienten entspricht.
Beispiel
So sieht's aus
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-Beispiel: Pseudoklasse first-of-type</title>
<style>
table { border-collapse: collapse; }
td { width: 30px; height: 30px; border: thin solid; }
tr:nth-child(odd) td:nth-child(odd) { background: black; }
tr:nth-child(even) td:nth-child(even) { background: black; }
</style>
</head>
<body>
<h1>Schachbrettmuster</h1>
<table>
<tbody>
<tr><th>8</th><td></td>...<td></td></tr>
...
<tr><th>1</th><td></td><td>...<td></td></tr>
<tr><th></th><th>A</th>...<th>H</th></tr>
</tbody>
</table>
</body>
</html>
Beachten Sie:
Selektor (CSS)
-
:nth-child(an+b)selektiert all diejenigen Kindelemente deren „Platznummer“ bei Division durch a den Rest b lässt. -
:nth-child(odd)ist identisch zu:nth-child(2n+1)und:nth-child(2n-1)(ungerade Platznummer). -
:nth-child(even)ist identisch zu:nth-child(2n)(gerade Platznummer). -
:nth-child(b)selektiert nur das b-te Kindelement. -
:nth-child(n)selektiert alle Kindelemente.
Zunächst werden in den ungeraden Tabellenzeilen alle ungeraden Tabellenfelder mit einem schwarzen Hintergrund versehen. Deshalb ist z.B. das Feld B8 schwarz gefärbt, denn es ist das dritte Kind der Tabellenzeile.
Anschließend werden in den geraden Tabellenzeilen die geraden Tabellenfelder eingefärbt. A7 z.B. ist schwarz, denn dieses td-Element ist das zweite Kind der Zeile.
Siehe auch das Beispiel für die Pseudoklasse nth-of-type().