Pseudoklasas nth-last-of-type
Pseudoklasas nth-last-of-type pasirenka
elementą, kuris yra n-tasis pagal tipą tėvo
palikuonis, skaičiuojant nuo galo.
Elgiasi panašiai kaip nth-of-type,
tik skaičiavimas vyksta nuo galo.
Sintaksė
selektorius:nth-last-of-type(skaičius | odd | even | išraiška) {
}
Reikšmės
| Reikšmė | Aprašas |
|---|---|
| skaičius |
Teigiamas skaičius nuo 1.
Nurodo elemento, kurį norime
pasirinkti, numerį. Elementų numeracija prasideda nuo 1.
|
odd |
Nelyginiai elementai. |
even |
Lyginiai elementai. |
| išraiška |
Galima sudaryti specialias išraiškas su raide n,
kuri žymi visus sveikuosius skaičius nuo nulio (ne nuo vieneto)
iki begalybės. Taigi, 2n - reiškia visus lyginius
skaičius (pradedant antruoju).
Kaip tai suprasti? Į n paeiliui įstatome
skaičius nuo 0 ir toliau: jei n = 0, tai 2n duos 0 -
tokio elemento nėra (elementų numeracija nuo 1),
jei n = 1, tai 2n duos 2 - antrasis elementas, jei n = 2,
2n duoda 4 - ketvirtasis elementas. Jei parašysite 3n - tai
bus kas trečias elementas (pradedant trečiuoju), ir taip toliau.
|
Pavyzdys
Raskime h2, kuris yra 2-asis h2
tėve nuo galo:
<div>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Pavyzdys
Raskime visus lyginius h2 nuo galo:
<div>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Pavyzdys
Raskime visus nelyginius h2 nuo galo:
<div>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
<h2>antraštė</h2>
<p>pastraipa</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
