Pseudo-klasa nth-last-child
Pseudo-klasa nth-last-child bira
element koji je n-to potomak
svog roditelja, brojeći od kraja. Ponaša se
analogno nth-child,
samo što se brojanje vrši od kraja.
Sintaksa
cssselektor:nth-last-child(broj | odd | even | izraz) {
}
Vrednosti
| Vrednost | Opis |
|---|---|
| broj |
Pozitivan ceo 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će je sastaviti posebne izraze sa slovom n,
koje označava sve cele brojeve od nule (ne od jedinice)
do beskonačnosti. Tako, 2n znači sve parne
brojeve (počev od drugog).
Kako ovo razumeti? Zamenjujemo n uzastopno
brojevima od 0 pa nadalje: 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
U ovom primeru ćemo crvene boje
učiniti onaj li element koji je 4-ti od kraja
potomak svog roditelja:
html<ul>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
</ul>cssli:nth-last-child(4) {
color: red;
}
Результат:
Primer
Sada ćemo crvenim učiniti sve
parne od kraja li elemente:
html<ul>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
</ul>cssli:nth-last-child(even) {
color: red;
}
Результат:
Primer
Sada ćemo crvenim učiniti sve neparne od
kraja li elemente:
html<ul>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
</ul>cssli:nth-last-child(odd) {
color: red;
}
Результат:
Primer
Sada ćemo crvenim učiniti svaki treći
od kraja li element:
html<ul>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
<li>stavka liste</li>
</ul>cssli:nth-last-child(3n) {
color: red;
}
Результат: