CSS/Selektoren/Pseudoklasse/strukturelle Pseudoklasse/nth-of-type

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • CSS 3.0
  • IE 9
  • Leer
  • Chrome
  • Safari
  • Opera
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>
In diesem Beispiel wird ein Schachbrett dargestellt.

Zunächst werden in der 1., 3., 5. und 7. Tabellenzeile die geradzahligen td-Elemente mit einem schwarzen Hintergrund versehen. Das Feld B8 zum Beispiel ist schwarz, weil es das zweite „<td>-Kind“ der Zeile ist.

Anschließend werden in den geraden Tabellenzeilen die ungeraden td-Elemente schwarz eingefärbt. A7 ist schwarz, denn es ist das erste „<td>-Kind“ der Zeile.

Vergleiche auch das Beispiel für die Pseudoklasse nth-child().
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]