:nth-last-childSelektor omogućuje odabir jednog ili više elemenata koji se temelje na njihovom izvoru kako bi, u skladu s formulom. U specifikaciji CSS Selectors Level 3 definiran je kao „strukturna pseudo-klasa“, što znači da se koristi za oblikovanje sadržaja na temelju odnosa s roditeljskim i bratskim elementima. Funkcionira isto kao :nth-childšto odabire stavke počevši od dna izvorne narudžbe, a ne od vrha.
Pretpostavimo da imamo popis s nepoznatim brojem predmeta i želimo istaknuti pretposljednju stavku (u ovom točno primjeru, "Četvrtu stavku"):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Umjesto da radimo nešto poput dodavanja klase na stavku popisa (npr. .highlight), Možemo koristiti :nth-last-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Kao što vidite, :nth-last-childuzima argument: to može biti jedan cijeli broj, ključne riječi "paran" ili "neparan" ili formula. Ako je naveden cijeli broj, odabran je samo jedan element - ali ključne riječi ili formula prelazit će kroz sve podređene dijelove nadređenog elementa i odabrati odgovarajuće elemente slične navigacijskim stavkama u polju u JavaScript-u. Ključne riječi "parno" i "neparno" izravne su (2, 4, 6 itd. Ili 1, 3, 5). Formula je konstruirana koristeći sintaksu an+b, gdje:
- "A" je cijela vrijednost
- "N" je doslovno slovo "n"
- "+" Je operator i može biti ili "+" ili "-"
- "B" je cijeli broj i potreban je ako je operator uključen u formulu
Važno je napomenuti da je ova formula jednadžba i ponavlja se kroz svaki element braće i sestara, određujući koji će biti odabran. "N" dio formule, ako je uključen, predstavlja skup rastućih pozitivnih cijelih brojeva (baš poput ponavljanja kroz niz). U našem gornjem primjeru odabrali smo svaki drugi element s formulom 2n, koji je radio, jer se svaki put kada se element provjerava, "n" povećavao za jedan (2 × 0, 2 × 1, 2 × 2, 2 × 3 itd.). Ako se redoslijed elementa podudara s rezultatom jednadžbe, on se odabire (2, 4, 6 itd.). Za detaljnija objašnjenja matematike pročitajte ovaj članak.
Za daljnju ilustraciju evo nekoliko primjera valjanih :nth-last-of-typeselektora:
Srećom, ne morate uvijek sami računati - postoji nekoliko :nth-last-childtestera i generatora:
- CSS-Tester Tester
- Tester Lea Veroua
Točke interesa
:nth-last-childponavlja kroz elemente počevši od dna izvornog poretka. Jedina razlika između njega i toga:nth-childje što se ovaj ponavlja kroz elemente počevši od vrha izvornog poretka.:nth-last-childSelektor je vrlo slična:nth-last-of-type, ali s jednom kritičnom razlika: to je manje specifičan. U našem primjeru gore dali bi isti rezultat, jer mi ponavljamo samolielemente, ali ako bismo ponavljali složeniju skupinu braće i sestara,:nth-last-childpokušali bi podudarati svu braću i sestre, a ne samo braću i sestre iste vrste elemenata. To otkriva snagu:nth-last-child-it može odabrati bilo koji element brata ili sestre u aranžmanu, ne samo elemente koji su navedeni prije dvotočke.
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Djela | 3,2+ | Djela | 9,5+ | 9+ | Djela | Djela |
:nth-last-childuveden je u CSS Selectors Module 3, što znači da ga stare verzije preglednika ne podržavaju. Međutim, moderna podrška za preglednike je besprijekorna, a novi pseudo-selektori široko se koriste u proizvodnim okruženjima. Ako vam je potrebna starija podrška za preglednik, ili polifil za IE, ili ove selektore koristite na nekritične načine, progresivno poboljšanje, što se preporučuje.