:nth-last-childSelector vă permite să selectați unul sau mai multe elemente bazate pe ordinea lor sursă, conform unei formule. Este definit în specificațiile de nivel 3 CSS Selectors ca o „pseudo-clasă structurală”, ceea ce înseamnă că este folosit pentru stilizarea conținutului pe baza relației sale cu elementele părinte și frate. Funcționează la fel ca :nth-childcu excepția faptului că selectează elementele care încep din partea de jos a comenzii sursă, nu în partea de sus.
Să presupunem că avem o listă cu un număr necunoscut de articole și dorim să evidențiem cel de-al doilea până la ultimul element (în acest exemplu exact, „Al patrulea element”):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
În loc să facem ceva de genul adăugării unei clase la elementul din listă (de ex. .highlight) Putem folosi :nth-last-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )După cum puteți vedea, :nth-last-childacceptă un argument: acesta poate fi un singur întreg, cuvintele cheie „par” sau „impar” sau o formulă. Dacă este specificat un număr întreg, este selectat un singur element - dar cuvintele cheie sau o formulă vor itera prin toți copiii elementului părinte și vor selecta elemente potrivite - similare cu elementele de navigare dintr-o matrice în JavaScript. Cuvintele cheie „par” și „impar” sunt simple (2, 4, 6 etc sau respectiv 1, 3, 5). Formula este construită folosind sintaxa an+b, unde:
- „A” este o valoare întreagă
- „N” este litera literală „n”
- „+” Este un operator și poate fi „+” sau „-”
- „B” este un număr întreg și este necesar dacă un operator este inclus în formulă
Este important să rețineți că această formulă este o ecuație și iterează prin fiecare element frate, determinând care va fi selectat. Partea „n” a formulei, dacă este inclusă, reprezintă un set de numere întregi pozitive în creștere (la fel ca iterația printr-o matrice). În exemplul nostru de mai sus, am selectat fiecare al doilea element cu formula 2n, care a funcționat deoarece de fiecare dată când un element a fost bifat, „n” a crescut cu unul (2 × 0, 2 × 1, 2 × 2, 2 × 3 etc.). Dacă ordinea unui element se potrivește cu rezultatul ecuației, acesta este selectat (2, 4, 6 etc.). Pentru o explicație mai aprofundată a matematicii implicate, vă rugăm să citiți acest articol.
Pentru a ilustra în continuare, iată câteva exemple de :nth-last-of-typeselectoare valide :
Din fericire, nu trebuie să faceți întotdeauna calculul singur - există mai mulți :nth-last-childtesteri și generatoare acolo:
- CSS-Tricks Tester
- Testerul lui Lea Verou
Puncte de interes
:nth-last-childitera prin elemente începând din partea de jos a ordinii sursă. Singura diferență dintre acesta și:nth-childeste că acesta din urmă iterează prin elemente începând din partea de sus a ordinii sursă.:nth-last-childSelectorul este foarte similar cu ,:nth-last-of-typedar cu o singură diferență esențială: este mai puțin specifică. În exemplul nostru de mai sus, ei ar produce același rezultat, deoarece vom itera doarlielemente, dar dacă am itera pe un grup mai complex de frați, am:nth-last-childîncerca să potrivim toți frații, nu numai frații de același tip de element. Acest lucru dezvăluie puterea:nth-last-child-it poate selecta orice element frate dintr-un aranjament, nu numai elementele care sunt specificate înainte de colon.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lucrări | 3.2+ | Lucrări | 9.5+ | 9+ | Lucrări | Lucrări |
:nth-last-childa fost introdus în CSS Selectors Module 3, ceea ce înseamnă că versiunile vechi ale browserelor nu o acceptă. Cu toate acestea, suportul modern pentru browser este impecabil, iar noile pseudo-selectoare sunt utilizate pe scară largă în mediile de producție. Dacă aveți nevoie de suport pentru browser mai vechi, fie polyfill pentru IE, fie utilizați acești selectori în moduri non-critice pentru îmbunătățirea progresivă, ceea ce este recomandat.