: nth-of-type - CSS-triki

:nth-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.

Recimo, da imamo neurejen seznam in želimo izmenično vključiti elemente seznama v "zebra-stripe":

First Item
Second Item
Third Item
Fourth Item
Fifth Item

Namesto dodajanja razredov vsakemu elementu seznama (npr. .even& .odd) Lahko uporabimo :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

Kot lahko vidite, :nth-of-typevzame argument: to je lahko eno celo število, ključne besede "sodo" ali "neparno" ali formula, kot je prikazano zgoraj. Č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 krmarjenje po elementih v matriki v JavaScript. Ključni besedi "sodo" in "liho" sta enostavni, vendar je formula 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-of-typeizbirnikov:

Oglejte si to pisalo!

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

• CSS-Tricks Tester
• Tester Lea Verou

Zanimivosti

• :nth-of-typeprehaja skozi elemente, začenši z vrha izvornega vrstnega reda. Edina razlika med njim in tem :nth-last-of-typeje, da slednji ponavlja elemente, začenši z dna izvornega reda.
• :nth-of-typeSelektor je zelo podobna :nth-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-childbi poskušali ujemati vse brate in sestre, ne samo brate in sestre iste vrste. To razkriva moč :nth-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-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.