:nth-childValijat võimaldab Teil valida ühe või mitu elementi, mis põhineb nende allikas järjekorras vastavalt valemile.
/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )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 venna elementidega.
Oletame, et me ehitame CSS-i võrku ja tahame igal neljandal võrgumoodulil veeri eemaldada. Siin on see HTML:
One Two Three Four Five Selle asemel, et lisada klass igale neljandale üksusele (nt .last), võime kasutada järgmist :nth-child:
.module:nth-child(4n) ( margin-right: 0; ):nth-childValijat võtab argument: see võib olla üks täisarv, märksõnad even, oddvõi valem. Kui täisarv on määratud, valitakse ainult üks element, kuid märksõnad või valem iterteerivad kõik vanemelemendi alamvariandid ja valivad sobivad elemendid - sarnaselt JavaScripti massiivi üksuste navigeerimisega. Märksõnad "paaris" ja "paaritu" on otsekohesed (vastavalt 2, 4, 6 jne või 1, 3, 5). 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 neljanda elemendi 4n, mis toimis, kuna iga elemendi kontrollimisel kasvas n väärtus ühe võrra (4 × 0, 4 × 1, 4 × 2, 4 × 3 jne). Kui elemendi järjestus vastab võrrandi tulemusele, valitakse see (4, 8, 12 jne). Asjakohase matemaatika põhjalikuma selgituse saamiseks lugege seda artiklit.
Edasiseks illustreerimiseks on siin mõned näited kehtivatest :nth-childvalijatest:
Õnneks ei pea te alati matemaatikat ise tegema - seal on mitu :nth-childtestijat ja generaatorit:
- CSS-trikkide testija
- Lea Verou testija
: n-nd laps (an + b)
Seal on vähe tuntud filter, millele saab :nth-childvastavalt CSS Selorsi spetsifikatsioonile lisada: Võimalus valida :nth-childelementide alamhulga of vormingut kasutades . Oletame, et teil on segasisu loend: mõnel on klass .video, mõnel klass .pictureja soovite valida kolm esimest pilti. Saate seda teha filtriga “of” nii:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Pange tähele, et see erineb valija lisamisest otse :nth-childvalijale:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )See võib veidi segadusse ajada, nii et näide võib aidata erinevust illustreerida:
Brauseri tugi filtrile “of” on väga piiratud: alates sellest kirjutamisest toetas süntaksi ainult Safari. Lemmikbrauseri oleku kontrollimiseks on siin järgmised probleemid, mis on seotud :nth-child(an+b of s):
- Firefox: n-nda lapse tugi (An + B selektsiooni)
- Chrome: rakendus: n-nda laps (S + an + b)
Huvipunktid
:nth-childitereerub elementide kaudu, mis algavad lähtekorra ülaosast. Ainus erinevus selle vahel:nth-last-childon see, et viimane itereerub elementide kaudu, mis algavad lähtekorra alt.- Esimese
narvu elementide valimise süntaks on natuke vastuoluline. Alustate-npluss positiivse arvu elementidega, mille soovite valida. Näiteksli:nth-child(-n+3)valib esimesed 3lielementi. :nth-childValijat on väga sarnane:nth-of-type, kuid üks kriitiline erinevus: see on vähem spetsiifilised. Meie ülaltoodud näites annaksid nad sama tulemuse, kuna me kordame ainult.moduleelemente, 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 paljastab jõu, et:nth-childsee võib paigutusest valida mis tahes õe-venna elemendi, mitte ainult kooloni eel täpsustatud elemendid.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ükskõik | 3,2+ | Ükskõik | 9,5+ | 9+ | Ükskõik | Ükskõik |
:nth-childvõ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.