Pseudoklasa nth-last-of-type
Pseudoklasa nth-last-of-type bira
element koji je n-ti potomak
roditelja određenog tipa, brojeći od kraja.
Ponaša se slično kao nth-of-type,
samo što se brojanje vrši od kraja.
Sintaksa
cssselektor:nth-last-of-type(broj | odd | even | izraz) {
}
Vrednosti
| Vrednost | Opis |
|---|---|
| broj |
Pozitivan broj počev od 1.
Određuje redni broj elementa kome želimo da
pristupimo. Numeracija elemenata počinje od 1.
|
odd |
Neparni elementi. |
even |
Parni elementi. |
| izraz |
Mogu se sastavljati posebni izrazi sa slovom n,
koje označava sve cele brojeve od nule (ne od jedinice)
do beskonačnosti. Dakle, 2n znači svi parni
brojevi (počev od drugog).
Kako ovo razumeti? Zamenjujemo u n sukcesivno
brojeve od 0 i tako dalje: ako je n = 0, onda 2n daje 0 -
takav element ne postoji (numeracija elemenata je od 1),
ako je n = 1, onda 2n daje 2 - drugi element, ako je n = 2,
2n daje 4 - četvrti element. Ako napišemo 3n - to
će biti svaki treći element (počev od trećeg), i tako dalje.
|
Primer
Pronaći ćemo h2 koji je 2-i h2
u roditelju od kraja:
html<div>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
</div>cssh2:nth-last-of-type(2) {
color: red;
}
Результат:
Primer
Pronaći ćemo sve parne h2 od kraja:
html<div>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
</div>cssh2:nth-last-of-type(even) {
color: red;
}
Результат:
Primer
Pronaći ćemo sve neparne h2 od kraja:
html<div>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
<h2>naslov</h2>
<p>pasus</p>
</div>cssh2:nth-last-of-type(odd) {
color: red;
}
Результат: