CSS/Selektoren/Pseudoklasse/strukturelle Pseudoklasse/nth-child

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • CSS 3.0
  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Inhaltsverzeichnis

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Tabelle im Zebralook

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Pseudoklasse first-of-type</title> <style> table {width: 95%;} th { background-color: #666; color: #fff; } tr { background-color: #fffbf0; color: #000; } tr:nth-child(odd) { background-color: #e4ebf2 ; } </style> </head> <body> <h1>Beispiel: Tabelle im Zebra-Look</h1> <main role="main"> <table> <tbody> <tr><th>Zeile</th><th>Inhalt</th></tr> <tr><td>7</td><td>Text</td></tr> <tr><td>6</td><td>Text</td></tr> <tr><td>5</td><td>Text</td></tr> <tr><td>4</td><td>Text</td></tr> <tr><td>3</td><td>Text</td></tr> <tr><td>2</td><td>Text</td></tr> <tr><td>1</td><td>Text</td></tr> <tr><td>0</td><td>Text</td></tr> </tbody> </table> </main> </body> </html>
In diesem Beispiel wird eine Tabelle dargestellt.

Zunächst werden alle Zeilen mit background:#fffbf0; eingefärbt. Dann wird jede zweite Zeile mit

tr:nth-child(odd) {
       background-color: #e4ebf2 ;
}
anders eingefärbt.

[Bearbeiten] Feld mit Schachbrettmuster

Beispiel ansehen …
<!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>
In diesem Beispiel wird ein Schachbrett dargestellt.

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().
Beachten Sie:
  • :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.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML