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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Selektor :nth-last-of-type funktioniert in völliger Analogie zu :nth-of-type(), nur dass die Zählung von hinten beginnt.

  • CSS 3.0
  • IE 9
  • Leer
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Pseudoklasse nth-last-of-type</title> <style> body { width: 30em; } p:nth-last-of-type(3n+1) { background-color: red } </style> </head> <body> <h1>Die Pseudoklasse nth-last-of-type</h1> <p>Beachten Sie, dass die Zählung von hinten beginnt.</p> <h2>Teilüberschrift</h2> <p>6. Absatz</p> <p>5. Absatz</p> <p>4. Absatz</p> <h2>Teilüberschrift</h2> <p>3. Absatz</p> <p>2. Absatz</p> <h2>Teilüberschrift</h2> <h3>Zwischenüberschrift</h3> <p>1. Absatz</p> </body> </html>
In diesem Beispiel erhalten der letzte, der 4.-letzte und der 7.-letzte Absatz einen roten Hintergrund, und zwar unabhängig davon, ob überhaupt, welche und wieviele Elemente davor, danach oder dazwischen stehen.

Weblinks[Bearbeiten]