:nth-last-childValijat võimaldab teil valida ühe või mitu elementi, mis põhineb nende allikas järjekorras vastavalt valemile. CSS-i selektorite 3. taseme spetsifikatsioonis on see määratletud kui „struktuurne pseudoklass”, mis tähendab, et seda kasutatakse sisu kujundamiseks lähtuvalt selle suhetest vanema ja õe-venna elementidega. See toimib samamoodi kui :nth-childsee, et ta valib üksused, mis algavad lähtekorralduse lõpust, mitte ülevalt.
Oletame, et meil on nimekiri tundmatu hulga üksustega ja me tahame esile tõsta viimast viimast (selles täpses näites „Neljas üksus”):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Selle asemel, et teha midagi, näiteks klassi lisamine loendiüksusesse (nt .highlight), võime kasutada järgmist :nth-last-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Nagu näete, :nth-last-childvõtab argument: see võib olla üks täisarv, märksõnad "paaris" või "paaritu" või valem. Kui täisarv on määratud, valitakse ainult üks element - kuid märksõnad või valem kordavad kõiki vanemelemendi lapsi ja valivad sobivad elemendid, mis sarnanevad JavaScripti massiivi elementide navigeerimisega. Märksõnad "paaris" ja "paaritu" on lihtsad (vastavalt 2, 4, 6 jne või 1, 3, 5). Valem koostatakse süntaksit kasutades an+b, kus:
- “A” on täisarv
- “N” on sõna otsene täht “n”
- “+” On operaator ja võib olla kas “+” või “-”
- “B” on täisarv ja see on vajalik, kui valemisse on lisatud operaator
Oluline on märkida, et see valem on võrrand ja kordub läbi iga õe-venna elemendi, määrates kindlaks, milline neist valitakse. Valemi „n” osa, kui see on lisatud, tähistab kasvavate positiivsete täisarvude komplekti (täpselt nagu massiivi kaudu kordamine). Meie ülaltoodud näites valisime valemiga iga teise elemendi 2n, mis toimis, sest iga elemendi kontrollimisel kasvas n väärtus ühe võrra (2 × 0, 2 × 1, 2 × 2, 2 × 3 jne). Kui elemendi järjestus vastab võrrandi tulemusele, valitakse see (2, 4, 6 jne). Asjakohase matemaatika põhjalikuma selgituse saamiseks lugege seda artiklit.
Edasiseks illustreerimiseks on siin mõned näited kehtivatest :nth-last-of-typevalijatest:
Õnneks ei pea te alati matemaatikat ise tegema - seal on mitu :nth-last-childtestijat ja generaatorit:
- CSS-trikkide testija
- Lea Verou testija
Huvipunktid
:nth-last-childitereerub elementide kaudu, mis algavad lähtekorra alt. Ainus erinevus selle vahel:nth-childon see, et viimane itereerub läbi elementide, mis algavad lähtekorra ülaosast.:nth-last-childValijat on väga sarnane:nth-last-of-type, kuid üks kriitiline erinevus: see on vähem spetsiifilised. Meie ülaltoodud näites annaksid nad sama tulemuse, kuna me kordame ainultlielemente, kuid kui me kordaksime keerukama õdede-vendade rühma üle,:nth-last-childsiis prooviksime sobitada kõik õed-vennad, mitte ainult sama tüüpi õed-vennad. See paljastab jõu, et:nth-last-childsee võib paigutusest valida mis tahes õe-venna elemendi, mitte ainult kooloni eel täpsustatud elemendid.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Töötab | 3,2+ | Töötab | 9,5+ | 9+ | Töötab | Töötab |
:nth-last-childvõeti kasutusele CSS Selektorite moodulis 3, mis tähendab, et brauserite vanad versioonid seda ei toeta. Kuid tänapäevane brauseritugi on laitmatu ning uusi pseudovalijaid kasutatakse tootmiskeskkondades laialdaselt. Kui vajate vanemat brauserituge, siis kas IE jaoks täitke polüfill või kasutage neid valijaid mitte-kriitilistel viisidel, mida soovitatakse järk-järgult täiendada.