Pseudoklasse nth-last-of-type
Pseudoklassen nth-last-of-type vælger
et element, som er det n'te barn
af forælder af specificeret type, tællende fra slutningen.
Opfører sig analogt med nth-of-type,
kun at tællingen foretages fra slutningen.
Syntaks
selektor:nth-last-of-type(tal | odd | even | udtryk) {
}
Værdier
| Værdi | Beskrivelse |
|---|---|
| tal |
Et positivt tal startende fra 1.
Angiver elementets nummer, som vi ønsker at
henvise til. Nummerering af elementer starter fra 1.
|
odd |
Ulige elementer. |
even |
Lige elementer. |
| udtryk |
Man kan sammensætte specielle udtryk med bogstavet n,
som betegner alle heltal fra nul (ikke fra et)
til uendelig. Således betyder 2n alle lige
tal (startende fra det andet).
Hvordan forstår man dette? Vi indsætter i n sekventielt
tal fra 0 og så videre: hvis n = 0, så giver 2n 0 -
et sådant element findes ikke (elementnummerering starter fra 1),
hvis n = 1, så giver 2n 2 - det andet element, hvis n = 2,
giver 2n 4 - det fjerde element. Hvis man skriver 3n - vil det
være hvert tredje element (startende fra det tredje), og så videre.
|
Eksempel
Lad os finde h2, som er den 2. h2
i forælderen fra slutningen:
<div>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Eksempel
Lad os finde alle lige h2 fra slutningen:
<div>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Eksempel
Lad os finde alle ulige h2 fra slutningen:
<div>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
