:nth-of-typeValijat võimaldab teil valida ühe või mitu elementi, mis põhineb nende allikas järjekorras vastavalt valemile. CSS-i selektorite 3. taseme spetsifikatsioonis on see määratletud kui „struktuurne pseudoklass”, mis tähendab, et seda kasutatakse sisu kujundamiseks lähtuvalt selle suhetest vanema ja õe-venna elementidega.
Oletame, et meil on tellimata loend ja soovime vaheldumisi loendiüksusi „sebra-triibutada“:
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Klasside lisamise asemel loendiüksustesse (nt .even& .odd) saame kasutada järgmist :nth-of-type:
li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )Nagu näete, :nth-of-typevõtab argument: see võib olla üks täisarv, märksõnad "paaris" või "paaritu" või ülaltoodud valem. Kui on määratud täisarv, valitakse ainult üks element, kuid märksõnad või valem iterteerivad kõik vanemelemendi alamlapsed ja valivad sobivad elemendid, mis on sarnased JavaScripti massiivi üksuste navigeerimisele. Märksõnad "paaris" ja "paaritu" on lihtsad, kuid valem koostatakse süntaksit kasutades an+b, kus:
- “A” on täisarv
- “N” on sõna otsene täht “n”
- “+” On operaator ja võib olla kas “+” või “-”
- “B” on täisarv ja see on vajalik, kui valemisse on lisatud operaator
Oluline on märkida, et see valem on võrrand ja kordub läbi iga õe-venna elemendi, määrates kindlaks, milline neist valitakse. Valemi „n” osa, kui see on lisatud, tähistab kasvavate positiivsete täisarvude komplekti (täpselt nagu massiivi kaudu kordamine). Meie ülaltoodud näites valisime valemiga iga teise elemendi 2n, mis toimis, sest iga elemendi kontrollimisel kasvas n väärtus ühe võrra (2 × 0, 2 × 1, 2 × 2, 2 × 3 jne). Kui elemendi järjestus vastab võrrandi tulemusele, valitakse see (2, 4, 6 jne). Asjakohase matemaatika põhjalikuma selgituse saamiseks lugege seda artiklit.
Edasiseks illustreerimiseks on siin mõned näited kehtivatest :nth-of-typevalijatest:
Õnneks ei pea te alati matemaatikat ise tegema - seal on mitu :nth-of-typetestijat ja generaatorit:
- CSS-trikkide testija
- Lea Verou testija
Huvipunktid
:nth-of-typeitereerub elementide kaudu, mis algavad lähtekorra ülaosast. Ainus erinevus selle vahel:nth-last-of-typeon see, et viimane itereerub elementide kaudu, mis algavad lähtekorra alt.:nth-of-typeValijat on väga sarnane:nth-child, kuid üks kriitiline erinevus: see on täpsem. Meie ülaltoodud näites annaksid nad sama tulemuse, kuna me kordame ainultlielemente, kuid kui me kordaksime keerukama õdede-vendade rühma üle,:nth-childsiis prooviksime sobitada kõik õed-vennad, mitte ainult sama tüüpi õed-vennad. See näitab selle jõudu, mis on:nth-of-typesuunatud kindla elemendi tüübile kokkuleppes seoses sarnaste õdede-vendadega, mitte kõigi õdede-vendadega.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Töötab | 3,2+ | Töötab | 9,5+ | 9+ | Töötab | Töötab |
:nth-of-typevõeti kasutusele CSS Selektorite moodulis 3, mis tähendab, et brauserite vanad versioonid seda ei toeta. Kuid tänapäevane brauseritugi on laitmatu ning uusi pseudovalijaid kasutatakse tootmiskeskkondades laialdaselt. Kui vajate vanemat brauserituge, siis kas IE jaoks täitke polüfill või kasutage neid valijaid mitte-kriitilistel viisidel, mida soovitatakse järk-järgult täiendada.