:nth-last-childIzbirnik omogoča izberete enega ali več elementov, ki se nanašajo na njihov izvor, da bi, v skladu s formulo. V specifikaciji CSS Selectors Level 3 je opredeljen kot "strukturni psevdorazred", kar pomeni, da se uporablja za oblikovanje vsebine glede na njen odnos z nadrejenimi in sorodstvenimi elementi. Deluje enako kot :nth-childle, če izbere elemente, ki se začnejo na dnu izvornega naročila in ne na vrhu.
Recimo, da imamo seznam z neznanim številom elementov in želimo poudariti zadnjo postavko (v tem natančnem primeru »četrti element«):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Namesto da bi naredili nekaj takega, kot da bi razredu dodali razred (npr. .highlight), Lahko uporabimo :nth-last-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Kot lahko vidite, :nth-last-childvzame argument: to je lahko eno celo število, ključne besede "sodo" ali "neparno" ali formula. Če je določeno celo število, je izbran samo en element, vendar bodo ključne besede ali formula prečkale vse podrejene elemente nadrejenega elementa in izbrale ujemajoče se elemente, podobne krmarjenju po elementih v polju v JavaScript. Ključni besedi "sodo" in "liho" sta enostavni (2, 4, 6 itd. Ali 1, 3, 5). Formula je sestavljena z uporabo sintakse an+b, kjer:
- "A" je celoštevilska vrednost
- "N" je dobesedna črka "n"
- "+" Je operater in je lahko "+" ali "-"
- "B" je celo število in je obvezno, če je v formulo vključen operator
Pomembno je vedeti, da je ta formula enačba in se ponavlja skozi vsak element brata ali sestre ter določa, kateri bo izbran. "N" del formule, če je vključen, predstavlja nabor naraščajočih pozitivnih celih števil (tako kot ponavljanje skozi matriko). V našem zgornjem primeru smo izbrali vsak drugi element s formulo 2n, ki je deloval, ker se je vsakič, ko je bil element preverjen, »n« povečal za eno (2 × 0, 2 × 1, 2 × 2, 2 × 3 itd.). Če se vrstni red elementa ujema z rezultatom enačbe, je izbran (2, 4, 6 itd.). Za podrobnejšo razlago matematike preberite ta članek.
Za nadaljnjo ponazoritev je tukaj nekaj primerov veljavnih :nth-last-of-typeizbirnikov:
Na srečo vam ni treba vedno računati sami - tam je več :nth-last-childpreizkuševalcev in generatorjev:
- CSS-Tricks Tester
- Tester Lea Verou
Zanimivosti
:nth-last-childprehaja skozi elemente, začenši z dna izvornega vrstnega reda. Edina razlika med njim in:nth-childtem, da slednji ponavlja elemente, začenši z vrha izvornega vrstnega reda.:nth-last-childSelektor je zelo podobna:nth-last-of-type, vendar z eno kritično razliko: da je manj natančna. V našem zgornjem primeru bi dali enak rezultat, ker ponavljamo samolielemente, če pa bi ponavljali bolj zapleteno skupino bratov in sester,:nth-last-childbi poskušali ujemati vse brate in sestre, ne samo brate in sestre iste vrste. To razkriva moč, da:nth-last-childlahko v dogovoru izbere kateri koli sorojeni element, ne le elementov, ki so podani pred dvopičjem.
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Deluje | 3,2+ | Deluje | 9,5+ | 9+ | Deluje | Deluje |
:nth-last-childje bil uveden v modulu CSS Selectors 3, kar pomeni, da ga stare različice brskalnikov ne podpirajo. Vendar je sodobna podpora za brskalnike brezhibna, novi psevdo-izbirniki pa se pogosto uporabljajo v produkcijskih okoljih. Če potrebujete podporo za starejši brskalnik, bodisi polyfill za IE bodisi uporabite te izbirnike na nekritične načine - postopno izboljšanje, kar je priporočljivo.