CSS/Selektoren/Pseudoklasse/strukturelle Pseudoklasse/nth-of-type
Aus SELFHTML-Wiki
< CSS | Selektoren | Pseudoklasse | strukturelle Pseudoklasse
Mithilfe des Selektors :nth-of-type() ist es möglich, das n-te gleichartige Kindelement eines Elternelementes zu selektieren. Der Selektor erwartet als Argument einen mathematischen Ausdruck, der einer arithmetischen Zahlenfolge mit ganzzahligen Koeffizienten entspricht.
Beispiel
ansehen …
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-Beispiel: Pseudoklasse nth-of-type</title>
<style>
table { border-collapse: collapse; }
td { width: 30px; height: 30px; border: thin solid; }
tr:nth-of-type(odd) td:nth-of-type(even) { background: black; }
tr:nth-of-type(even) td:nth-of-type(odd) { 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></tr>
<tr><th></th><th>A</th>...<th>H</th></tr>
</tbody>
</table>
</body>
</html>
Beachten Sie:
:nth-of-type(an+b) selektiert all diejenigen Geschwisterelemente deren „Platznummer“ bei Division durch a den Rest b lässt.
:nth-of-type(odd) ist identisch zu :nth-of-type(2n+1) und :nth-of-type(2n-1) (ungerade Platznummer).
:nth-of-type(even) ist identisch zu :nth-of-type(2n) (gerade Platznummer).
:nth-of-type(b) selektiert nur das b-te Element des entsprechenden Typs.
:nth-of-type(n) selektiert alle Elemente des entsprechenden Typs.Weblinks[Bearbeiten]
- CSS3 structural pseudo-class selector tester (Lea Verou)
Zunächst werden in der 1., 3., 5. und 7. Tabellenzeile die geradzahligen
Anschließend werden in den geraden Tabellenzeilen die ungeradentd-Elemente mit einem schwarzen Hintergrund versehen. Das Feld B8 zum Beispiel ist schwarz, weil es das zweite „<td>-Kind“ der Zeile ist.td-Elemente schwarz eingefärbt. A7 ist schwarz, denn es ist das erste „<td>-Kind“ der Zeile.