Pseudoklasse nth-last-of-type
Pseudoklassen nth-last-of-type velger
et element som er det n-te barnet
av en forelder av spesifisert type, tellende fra slutten.
Oppfører seg på samme måte som nth-of-type,
men tellingen skjer fra slutten.
Syntaks
velger:nth-last-of-type(tall | odd | even | uttrykk) {
}
Verdier
| Verdi | Beskrivelse |
|---|---|
| tall |
Et positivt tall som starter fra 1.
Angir nummeret på elementet vi ønsker å
adressere. Nummerering av elementer starter fra 1.
|
odd |
Odde elementer. |
even |
Like elementer. |
| uttrykk |
Man kan sette sammen spesielle uttrykk med bokstaven n,
som representerer alle heltall fra null (ikke fra én)
til uendelig. Så, 2n betyr alle like
tall (starter fra det andre).
Hvordan forstå dette? Vi erstatter n sekvensielt
med tall fra 0 og så videre: hvis n = 0, gir 2n 0 -
det finnes ikke noe slikt element (elementnummerering starter fra 1),
hvis n = 1, gir 2n 2 - det andre elementet, hvis n = 2,
gir 2n 4 - det fjerde elementet. Hvis man skriver 3n - vil dette
være hvert tredje element (starter fra det tredje), og så videre.
|
Eksempel
La oss finne h2 som er det 2. h2
i forelderen fra slutten:
<div>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Eksempel
La oss finne alle like h2 fra slutten:
<div>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Eksempel
La oss finne alle odde h2 fra slutten:
<div>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
