: nth-last-of-type - CSS-triki

Anonim

:nth-last-of-typeIzbirnik omogoča izberete enega ali več elementov, ki se nanašajo na njihov izvor, da bi, v skladu s formulo. V specifikaciji CSS Selectors Level 3 je opredeljen kot "strukturni psevdorazred", kar pomeni, da se uporablja za oblikovanje vsebine glede na njen odnos z nadrejenimi in sorodstvenimi elementi. Deluje enako kot :nth-of-typele, če izbere elemente, ki se začnejo na dnu izvornega naročila in ne na vrhu.

Recimo, da imamo neurejen seznam in želimo poudariti zadnjo postavko (v tem natančnem primeru »četrti element«):



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

Namesto da bi naredili nekaj takega, kot da bi razredu dodali razred (npr. .highlight), Lahko uporabimo :nth-last-of-type:

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

Kot lahko vidite, :nth-last-of-typevzame argument: to je lahko eno celo število, ključne besede "sodo" ali "neparno" ali formula. Če je določeno celo število, je izbran samo en element - vendar bodo ključne besede ali formula ponavljale vse podrejene elemente nadrejenega elementa in izbrale ujemajoče se elemente - podobno kot pri krmarjenju po elementih v polju v JavaScript. Ključni besedi "sodo" in "liho" sta enostavni (2, 4, 6 itd. Ali 1, 3, 5 itd.). Formula je sestavljena z uporabo sintakse an+b, kjer:

  • "A" je celoštevilska vrednost
  • "N" je dobesedna črka "n"
  • "+" Je operater in je lahko "+" ali "-"
  • "B" je celo število in je obvezno, če je v formulo vključen operator

Pomembno je vedeti, da je ta formula enačba in se ponavlja skozi vsak element brata ali sestre ter določa, kateri bo izbran. "N" del formule, če je vključen, predstavlja nabor naraščajočih pozitivnih celih števil (tako kot ponavljanje skozi matriko). V našem zgornjem primeru smo izbrali vsak drugi element s formulo 2n, ki je deloval, ker se je vsakič, ko je bil element preverjen, »n« povečal za eno (2 × 0, 2 × 1, 2 × 2, 2 × 3 itd.). Če se vrstni red elementa ujema z rezultatom enačbe, je izbran (2, 4, 6 itd.). Za podrobnejšo razlago matematike preberite ta članek.

Za nadaljnjo ponazoritev je tukaj nekaj primerov veljavnih :nth-last-of-typeizbirnikov:

Oglejte si Pen CSS-Triki:: nth-last-of-type Chris Coyier (@chriscoyier) na CodePen.

Na srečo vam ni treba vedno računati sami - tam je več :nth-last-of-typepreizkuševalcev in generatorjev:

  • CSS-Tricks Tester
  • Tester Lea Verou

Zanimivosti

  • :nth-last-of-typeprehaja skozi elemente, začenši z dna izvornega vrstnega reda. Edina razlika med njim in tem :nth-of-typeje, da slednji ponavlja elemente, začenši z dna izvornega reda.
  • :nth-last-of-typeSelektor je zelo podobna :nth-last-child, vendar z eno kritično razliko: to je bolj specifičen. V našem zgornjem primeru bi dali enak rezultat, ker ponavljamo samo lielemente, če pa bi ponavljali bolj zapleteno skupino bratov in sester, :nth-last-childbi poskušali ujemati vse brate in sestre, ne samo brate in sestre iste vrste. To razkriva moč :nth-last-of-type-it cilja na določeno vrsto elementa v dogovoru glede na podobne brate in sestre, ne na vse brate in sestre.

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Deluje 3,2+ Deluje 9,5+ 9+ Deluje Deluje

:nth-last-of-typeje bil uveden v modulu CSS Selectors 3, kar pomeni, da ga stare različice brskalnikov ne podpirajo. Vendar je sodobna podpora za brskalnike brezhibna, novi psevdo-izbirniki pa se pogosto uporabljajo v produkcijskih okoljih. Če potrebujete podporo za starejši brskalnik, bodisi polyfill za IE bodisi uporabite te izbirnike na nekritične načine - postopno izboljšanje, kar je priporočljivo.