Den :nth-last-of-typeVelgeren 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-of-typebortsett fra at den velger elementer som starter nederst i kildearrangementet, ikke øverst.
Anta at vi har en uordnet liste og ø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-of-type:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )Som du kan se, :nth-last-of-typetar 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 - i likhet med navigeringselementer i en matrise i JavaScript. Nøkkelord "jevn" og "merkelig" er greie (henholdsvis 2, 4, 6 osv. Eller 1, 3, 5 osv.). 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:
Se pennen CSS-triks:: nth-last-of-type av Chris Coyier (@chriscoyier) på CodePen.
Heldigvis trenger du ikke alltid å gjøre matte selv - det er flere :nth-last-of-typetestere og generatorer der ute:
- CSS-Tricks Tester
- Lea Verous tester
Interessepunkt
:nth-last-of-typedet gjentas gjennom elementer som starter fra bunnen av kildeordren. Den eneste forskjellen mellom det og:nth-of-typeer at sistnevnte itererer gjennom elementer som starter fra bunnen av kildearrangementet.- Den
:nth-last-of-typevelgeren er svært lik:nth-last-child, men med en viktig forskjell: det er mer spesifikke. 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-of-type-it retter seg mot en bestemt type element i en ordning i forhold til lignende søsken, ikke alle søsken.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Virker | 3.2+ | Virker | 9.5+ | 9+ | Virker | Virker |
:nth-last-of-typeble 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.