Pseudoklasse nth-last-child
Pseudoklassen nth-last-child vælger
et element, som er det n'te barneelement
af sin forælder, talt fra slutningen. Opfører sig
analogt til nth-child,
men optællingen foretages fra slutningen.
Syntaks
cssselektor:nth-last-child(tal | odd | even | udtryk) {
}
Værdier
| Værdi | Beskrivelse |
|---|---|
| tal |
Et positivt tal startende fra 1.
Angiver nummeret på det element, 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 uendeligt. Så, 2n betyder alle lige
tal (startende fra det andet).
Hvordan forstås 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
I dette eksempel vil vi gøre den
li, som er det 4. fra slutningen
barneelement af sin forælder, rød:
html<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>cssli:nth-last-child(4) {
color: red;
}
Результат:
Eksempel
Nu vil vi gøre alle
lige li (talt fra slutningen) røde:
html<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>cssli:nth-last-child(even) {
color: red;
}
Результат:
Eksempel
Nu vil vi gøre alle ulige (talt fra
slutningen) li røde:
html<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>cssli:nth-last-child(odd) {
color: red;
}
Результат:
Eksempel
Nu vil vi gøre hver tredje
(talt fra slutningen) li rød:
html<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>cssli:nth-last-child(3n) {
color: red;
}
Результат: