Pseudoklassen nth-last-of-type
Pseudoklassen nth-last-of-type väljer
ett element som är det n:te barnet
av en angiven typ, räknat från slutet.
Den fungerar på samma sätt som nth-of-type,
men räknar från slutet.
Syntax
selector:nth-last-of-type(tal | odd | even | uttryck) {
}
Värden
| Värde | Beskrivning |
|---|---|
| tal |
Ett positivt tal början från 1.
Anger elementets nummer som vi vill
rikta in oss på. Elementnumrering börjar från 1.
|
odd |
Ojämna element. |
even |
Jämna element. |
| uttryck |
Man kan skapa speciella uttryck med bokstaven n,
som representerar alla heltal från noll (inte från ett)
till oändligheten. Så, 2n betyder alla jämna
nummer (med början från det andra).
Hur förstår man detta? Vi ersätter n sekventiellt
med tal från 0 och så vidare: om n = 0, då ger 2n 0 -
det finns inget sådant element (elementnumrering börjar från 1),
om n = 1, då ger 2n 2 - det andra elementet, om n = 2,
ger 2n 4 - det fjärde elementet. Om man skriver 3n - blir det
var tredje element (med början från det tredje), och så vidare.
|
Exempel
Låt oss hitta h2 som är det 2:a h2
i föräldern från slutet:
<div>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Exempel
Låt oss hitta alla jämna h2 från slutet:
<div>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Exempel
Låt oss hitta alla ojämna h2 från slutet:
<div>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
<h2>rubrik</h2>
<p>stycke</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
