Hinweis

Aufgrund technischer Probleme ist unser Forum im Moment nicht erreichbar. Wir bitten um Verständnis und hoffen auf Beseitigung der Schwierigkeiten bis spätestens Montag, 25.6. Unser Blog und unser Wiki sind nach wie vor auch im Moment verfügbar.

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

Aus SELFHTML-Wiki
< CSS‎ | Selektoren‎ | Pseudoklasse‎ | strukturelle Pseudoklasse(Weitergeleitet von Nth-of-type)
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
  • Firefox
  • 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]