Den :nth-last-childvæ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-childundtagen at det vælger emner, der starter i bunden af kildearrangementet, ikke øverst.
Antag, at vi har en liste med et ukendt antal varer, og vi ønsker at fremhæve det næstsidste element (i dette nøjagtige eksempel "det fjerde element"):
- 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-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Som du kan se, :nth-last-childtager et argument: dette kan være et enkelt heltal, nøgleordene "lige" eller "ulige" eller en formel. Hvis der er angivet et helt tal, vælges kun et element - men nøgleordene eller en formel gentages gennem alle underordnede elementers børn og vælger matchende elementer, der ligner navigationselementer i en matrix i JavaScript. Nøgleord "lige" og "ulige" er ligetil (henholdsvis 2, 4, 6 osv. Eller 1, 3, 5). 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:
Heldigvis behøver du ikke altid lave matematikken selv - der er flere :nth-last-childtestere og generatorer derude:
- CSS-Tricks Tester
- Lea Verous tester
Interessepunkter
:nth-last-childitererer gennem elementer, der starter fra bunden af kildearrangementet. Den eneste forskel mellem det og:nth-childer, at sidstnævnte gentager sig gennem elementer, der starter fra toppen af kildeordren.- Den
:nth-last-childvælgeren er meget lig:nth-last-of-type, men med en kritisk forskel: det er mindre 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-child-det kan vælge ethvert søskendeelement i et arrangement, ikke kun elementer, der er specificeret før kolon.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbejder | 3.2+ | Arbejder | 9.5+ | 9+ | Arbejder | Arbejder |
:nth-last-childblev 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.