Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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
  • 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.
ansehen …
Vergleiche: CSS/Selektoren/Pseudoklasse/strukturelle 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]

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/nth-of-type&oldid=61301“