Den :nth-last-childVelgeren gjør det mulig å velge ett eller flere elementer basert på deres kilde rekkefølge, i henhold til en formel. Det er definert i CSS Selectors Level 3-spesifikasjonen som en "strukturell pseudoklasse", noe som betyr at den brukes til å style innhold basert på forholdet til foreldre og søskenelementer. Den fungerer på samme måte som :nth-childbortsett fra at den velger elementer som starter nederst i kildearrangementet, ikke øverst.
Anta at vi har en liste med et ukjent antall varer, og vi ønsker å markere det nest siste elementet (i dette eksakte eksemplet "det fjerde elementet"):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
I stedet for å gjøre noe som å legge til en klasse i listeelementet (f.eks. .highlight), Kan vi bruke :nth-last-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Som du kan se, :nth-last-childtar det et argument: dette kan være et enkelt heltall, nøkkelordene “jevn” eller “odd”, eller en formel. Hvis et heltall er spesifisert, blir bare ett element valgt - men nøkkelordene eller en formel vil gjenta gjennom alle barna til det overordnede elementet og velge samsvarende elementer som ligner på navigeringselementer i en matrise i JavaScript. Nøkkelord "jevn" og "merkelig" er greie (henholdsvis 2, 4, 6 osv. Eller 1, 3, 5). Formelen er konstruert ved hjelp av syntaksen an+b, der:
- “A” er en heltallverdi
- "N" er den bokstavelige bokstaven "n"
- “+” Er en operatør og kan være enten “+” eller “-”
- “B” er et heltall og kreves hvis en operator er inkludert i formelen
Det er viktig å merke seg at denne formelen er en ligning, og den går gjennom hvert søskenelement og bestemmer hvilken som skal velges. “N” -delen av formelen, hvis den er inkludert, representerer et sett med økende positive heltall (akkurat som å gjenta det gjennom en matrise). I vårt eksempel ovenfor valgte vi hvert andre element med formelen 2n, som fungerte fordi hver gang et element ble sjekket, økte “n” med ett (2 × 0, 2 × 1, 2 × 2, 2 × 3 osv.). Hvis rekkefølgen til et element samsvarer med resultatet av ligningen, blir den valgt (2, 4, 6 osv.). For en mer inngående forklaring på matematikken som er involvert, vennligst les denne artikkelen.
For å illustrere videre, her er noen eksempler på gyldige :nth-last-of-typevelgere:
Heldigvis trenger du ikke alltid å gjøre matte selv - det er flere :nth-last-childtestere og generatorer der ute:
- CSS-Tricks Tester
- Lea Verous tester
Interessepunkt
:nth-last-childdet gjentas gjennom elementer som starter fra bunnen av kildeordren. Den eneste forskjellen mellom det og:nth-childer at sistnevnte gjentar seg gjennom elementer som begynner fra toppen av kildeordren.- Den
:nth-last-childvelgeren er svært lik:nth-last-of-type, men med en viktig forskjell: det er mindre spesifikk. I eksemplet vårt ovenfor ville de produsere det samme resultatet fordi vi bare itererer overlielementer, men hvis vi gjentok oss over en mer sammensatt gruppe søsken,:nth-last-childville vi prøve å matche alle søsken, ikke bare søsken av samme elementtype. Dette avslører kraften til:nth-last-child- det kan velge hvilket som helst søskenelement i en ordning, ikke bare elementer som er spesifisert før kolon.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Virker | 3.2+ | Virker | 9.5+ | 9+ | Virker | Virker |
:nth-last-childble introdusert i CSS Selectors Module 3, som betyr at gamle versjoner av nettlesere ikke støtter det. Imidlertid er moderne nettleserstøtte upåklagelig, og de nye pseudovelgerne er mye brukt i produksjonsmiljøer. Hvis du trenger eldre nettleserstøtte, kan du enten fylle ut for IE, eller bruke disse velgerne på ikke-kritiske måter, på en progressiv forbedring, noe som anbefales.