: nth-last-of-type - CSS-Tricks

:nth-last-of-typeSelector 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-of-typecu 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ă neordonată și dorim să evidențiem 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-of-type:

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )

După cum puteți vedea, :nth-last-of-typeacceptă 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 - similar cu navigarea articolelor dintr-o matrice în JavaScript. Cuvintele cheie „par” și „impar” sunt simple (respectiv 2, 4, 6 etc. sau respectiv 1, 3, 5 etc.). 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 :

Vedeți Pen CSS-Tricks:: nth-last-of-type de Chris Coyier (@chriscoyier) pe CodePen.

Din fericire, nu trebuie să faceți întotdeauna calculul singur - există mai mulți :nth-last-of-typetesteri și generatoare acolo:

CSS-Tricks Tester
Testerul lui Lea Verou

Puncte de interes

:nth-last-of-typeitera prin elemente începând din partea de jos a ordinii sursă. Singura diferență dintre acesta și :nth-of-typeeste că acesta din urmă iterează prin elemente începând de la partea de jos a ordinii sursă.
:nth-last-of-typeSelectorul este foarte similar cu , :nth-last-childdar cu o singură diferență esențială: este mai specific. În exemplul nostru de mai sus, ei ar produce același rezultat, deoarece vom itera doar lielemente, 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-of-type-it vizează un anumit tip de element într-un aranjament în raport cu frați similari, nu toți frații.

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-of-typea 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.