:nth-last-of-typeSelektors ļauj izvēlēties vienu vai vairākus elementus, pamatojoties uz to avota, lai, saskaņā ar formulu. CSS Selectors 3. līmeņa specifikācijā tas ir definēts kā “strukturāla pseidoklase”, kas nozīmē, ka to lieto satura veidošanai, pamatojoties uz tā attiecībām ar vecāku un brāļu elementiem. Tas darbojas tāpat kā :nth-of-typeizņemot to, ka atlasa vienumus, kas sākas avota secības apakšdaļā, nevis augšpusē.
Pieņemsim, ka mums ir nesakārtots saraksts un mēs vēlamies izcelt otro līdz pēdējo vienumu (šajā precīzajā piemērā - “Ceturtais vienums”):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Tā vietā, lai izdarītu kaut ko, piemēram, pievienotu klasi saraksta vienumam (piemēram, .highlightmēs varam izmantot :nth-last-of-type:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )Kā redzat, :nth-last-of-typeņem argumentu: tas var būt viens vesels skaitlis, atslēgvārdi “pāra” vai “nepāra” vai formula. Ja ir norādīts vesels skaitlis, tiek atlasīts tikai viens elements, bet atslēgvārdi vai formula atkārtosies visos vecāka elementa pakārtotajos elementos un atlasīs atbilstošos elementus - līdzīgi kā navigācijai masīva elementos JavaScript. Atslēgvārdi “pāra” un “nepāra” ir vienkārši (attiecīgi 2, 4, 6 utt. Vai attiecīgi 1, 3, 5 utt.). Formula tiek veidota, izmantojot sintaksi an+b, kur:
- “A” ir vesels skaitlis
- “N” ir burtisks burts “n”
- “+” Ir operators un var būt “+” vai “-”
- “B” ir vesels skaitlis un ir nepieciešams, ja formulā ir iekļauts operators
Ir svarīgi atzīmēt, ka šī formula ir vienādojums un atkārtojas caur katru brāļa vai māsas elementu, nosakot, kurš tiks izvēlēts. Formulas “n” daļa, ja tā ir iekļauta, apzīmē pieaugošu pozitīvu veselu skaitļu kopu (tāpat kā iterējot caur masīvu). Iepriekš minētajā piemērā mēs atlasījām katru otro elementu ar formulu 2n, kas darbojās, jo katru reizi, kad elements tika pārbaudīts, “n” palielinājās par vienu (2 × 0, 2 × 1, 2 × 2, 2 × 3 utt.). Ja elementa secība sakrīt ar vienādojuma rezultātu, tas tiek izvēlēts (2, 4, 6 utt.). Lai iegūtu padziļinātu skaidrojumu par iesaistīto matemātiku, lūdzu, izlasiet šo rakstu.
Lai ilustrētu tālāk, šeit ir daži derīgu :nth-last-of-typeatlasītāju piemēri :
Skatiet Krāsu Koijera (@chriscoyier) n-to-pēdējā veida tipu vietnē CodePen.
Par laimi, jums ne vienmēr ir jāveic matemātika pašiem - tur ir vairāki :nth-last-of-typetestētāji un ģeneratori:
- CSS-triku testeris
- Lea Verou testētājs
Apskates vietas
:nth-last-of-typeatkārtojas caur elementiem, sākot no avota secības apakšas. Vienīgā atšķirība starp to un:nth-of-typeto, ka pēdējais atkārtojas caur elementiem, sākot no avota secības apakšas.:nth-last-of-typeSelektors ir ļoti līdzīgs:nth-last-child, bet ar vienu būtisku atšķirību: tas ir konkrētāks. Iepriekš minētajā piemērā viņiem būtu tāds pats rezultāts, jo mēs atkārtojam tikailielementus, bet, ja mēs atkārtotu sarežģītāku brāļu un māsu grupu, mēs:nth-last-childmēģinātu saskaņot visus brāļus un māsas, ne tikai tāda paša elementa brāļus un māsas. Tas atklāj -:nth-last-of-typetā ir vērsta uz noteiktu elementa veidu vienošanās ietvaros attiecībā uz līdzīgiem brāļiem un māsām, nevis visiem brāļiem un māsām.
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Darbi | 3.2+ | Darbi | 9,5+ | 9+ | Darbi | Darbi |
:nth-last-of-typetika ieviests CSS selektoru 3. modulī, kas nozīmē, ka vecās pārlūkprogrammu versijas to neatbalsta. Tomēr mūsdienu pārlūka atbalsts ir nevainojams, un jaunie pseido-selektori tiek plaši izmantoti ražošanas vidēs. Ja jums ir nepieciešams vecāks pārlūka atbalsts, vai nu IE polifill, vai arī izmantojiet šos atlasītājus nekritiskos veidos, kas ir ieteicami pakāpeniski.