Den :nth-last-of-typevælgeren kan du vælge en eller flere elementer baseret på deres kilde ordre, ifølge en formel. Det er defineret i CSS Selectors Level 3 spec som en "strukturel pseudoklasse", hvilket betyder at den bruges til at style indhold baseret på dets forhold til forældre og søskendeelementer. Det fungerer det samme som :nth-of-typeundtagen at det vælger emner, der starter i bunden af kildearrangementet, ikke øverst.
Antag, at vi har en ikke-ordnet liste og ønsker at fremhæve det næstsidste punkt (i dette nøjagtige eksempel "det fjerde punkt"):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
I stedet for at gøre noget som at tilføje en klasse til listeelementet (f.eks. .highlight) Kan vi bruge :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-typetager et argument: dette kan være et enkelt heltal, nøgleordene "lige" eller "ulige" eller en formel. Hvis der er angivet et heltal, vælges kun et element - men nøgleordene eller en formel gentages gennem alle underordnede elementers børn og vælger matchende elementer - svarende til navigeringselementer i en matrix i JavaScript. Søgeord "lige" og "ulige" er ligetil (henholdsvis 2, 4, 6 osv. Eller 1, 3, 5 osv.). Formlen er konstrueret ved hjælp af syntaksen an+b, hvor:
- “A” er en heltalsværdi
- "N" er bogstavet "n"
- “+” Er en operatør og kan enten være “+” eller “-”
- “B” er et heltal og kræves, hvis en operator er inkluderet i formlen
Det er vigtigt at bemærke, at denne formel er en ligning, og den går igennem hvert søskendeelement og bestemmer, hvilken der skal vælges. “N” -delen af formlen, hvis den er inkluderet, repræsenterer et sæt stigende positive heltal (ligesom det gentages gennem en matrix). I vores ovenstående eksempel valgte vi hvert andet element med formlen 2n, som fungerede, fordi hver gang et element blev kontrolleret, steg "n" med et (2 × 0, 2 × 1, 2 × 2, 2 × 3 osv.). Hvis et elements rækkefølge matcher resultatet af ligningen, bliver det valgt (2, 4, 6 osv.). For en mere detaljeret forklaring af den involverede matematik, bedes du læse denne artikel.
For at illustrere yderligere er her nogle eksempler på gyldige :nth-last-of-typevælgere:
Se pennen CSS-tricks:: n-sidste-af-typen af Chris Coyier (@chriscoyier) på CodePen.
Heldigvis behøver du ikke altid lave matematikken selv - der er flere :nth-last-of-typetestere og generatorer derude:
- CSS-Tricks Tester
- Lea Verous tester
Interessepunkter
:nth-last-of-typeitererer gennem elementer, der starter fra bunden af kildearrangementet. Den eneste forskel mellem det og:nth-of-typeer, at sidstnævnte gentages gennem elementer, der starter fra bunden af kildearrangementet.- Den
:nth-last-of-typevælgeren er meget lig:nth-last-child, men med en kritisk forskel: det er mere specifik. I vores eksempel ovenfor ville de producere det samme resultat, fordi vi kun itererer overlielementer, men hvis vi gentager sig over en mere kompleks gruppe af søskende,:nth-last-childville vi prøve at matche alle søskende, ikke kun søskende af samme elementtype. Dette afslører styrken ved:nth-last-of-type- det er målrettet mod en bestemt type element i et arrangement i forhold til lignende søskende, ikke alle søskende.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbejder | 3.2+ | Arbejder | 9.5+ | 9+ | Arbejder | Arbejder |
:nth-last-of-typeblev introduceret i CSS Selectors Module 3, hvilket betyder, at gamle versioner af browsere ikke understøtter det. Imidlertid er moderne browsersupport upåklagelig, og de nye pseudovælgere bruges i vid udstrækning i produktionsmiljøer. Hvis du har brug for ældre browsersupport, skal du enten udfylde til IE eller bruge disse vælgere på ikke-kritiske måder á la progressiv forbedring, hvilket anbefales.