CSS/Selektoren/Pseudoklasse/strukturelle Pseudoklasse/nth-last-of-type
Aus SELFHTML-Wiki
< CSS | Selektoren | Pseudoklasse | strukturelle Pseudoklasse
Der Selektor :nth-last-of-type funktioniert in völliger Analogie zu :nth-of-type(), nur dass die Zählung von hinten beginnt.
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]
- CSS3 structural pseudo-class selector tester (Lea Verou)
