:nth-last-of-typeValijat 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-of-typesee, et ta valib üksused, mis algavad lähtekorralduse lõpust, mitte ülevalt.
Oletame, et meil on korrastamata loend ja soovime esile tõsta teine kuni viimane üksus (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-of-type:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )Nagu näete, :nth-last-of-typevõ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 iterteerivad kõik vanemelemendi alamlapsed ja valivad sobivad elemendid - sarnaselt JavaScripti massiivi üksuste navigeerimisega. Märksõnad "paaris" ja "paaritu" on lihtsad (vastavalt 2, 4, 6 jne või 1, 3, 5 jne). 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:
Vaadake Pen CSS-Tricks:: n-viimane tüüp-tüüpi Chris Coyier (@chriscoyier) CodePenis.
Õnneks ei pea te alati matemaatikat ise tegema - seal on mitu :nth-last-of-typetestijat ja generaatorit:
- CSS-trikkide testija
- Lea Verou testija
Huvipunktid
:nth-last-of-typeitereerub elementide kaudu, mis algavad lähtekorra alt. Ainus erinevus selle vahel:nth-of-typeon see, et viimane itereerub elementide kaudu, mis algavad lähtekorra alt.:nth-last-of-typeValijat on väga sarnane:nth-last-child, kuid üks kriitiline erinevus: see on täpsem. 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 näitab selle jõudu, mis on:nth-last-of-typesuunatud kindla elemendi tüübile kokkuleppes seoses sarnaste õdede-vendadega, mitte kõigi õdede-vendadega.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Töötab | 3,2+ | Töötab | 9,5+ | 9+ | Töötab | Töötab |
:nth-last-of-typevõ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.