CSS :nth-child() parinkiklio supratimas

Kaip ir visus CSS parinkiklius, galite naudoti :nth-child(), kad identifikuotumėte tinklalapio elementus ir pritaikytumėte jiems stilius. Tačiau šis parinkiklis leidžia susiaurinti brolių ir seserų rinkinį pagal jų santykinę padėtį.

Parinkiklis palaiko kai kuriuos pagrindinius raktinius žodžius įprastais atvejais, bet taip pat pateikia galingą šablono atitikimo sintaksę. Naudodami jį galite pasirinkti elementus pagal įprastus, pasikartojančius modelius arba sudėtingesnius apibrėžimus, atsižvelgdami į savo poreikius.

:nth-child() parinkiklio sintaksė

Kaip CSS pseudoklasės parinkiklis, :nth-child() sintaksė skiriasi nuo kitų selektorių. Tai yra argumentas kaip pavyzdys, kaip suderinti brolių ir seserų rinkinio elementus:

:nth-child(args) {
/*...*/
}

Pagrindinis dėmesys skiriamas skliausteliuose pateiktiems argumentams. Šie argumentai apibrėžia pasirenkamų elementų poaibį.

Raktinių žodžių verčių naudojimas įprastais atvejais

Šis parinkiklis gali pritaikyti dvi raktinio žodžio reikšmes: nelyginis ir net. Jie ypač naudingi formuoti alternatyvias lentelės eilutes.

Paprastas sutvarkytas sąrašas yra dar vienas geras pavyzdys, kai galite naudoti šias raktinių žodžių reikšmes:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Naudojant :n-tas vaikas (nelyginis) parinkiklį, galite pakeisti kiekvieno alternatyvaus elemento spalvą:

:nth-child(odd) {
color: red;
}

Elementai prasideda 1 indeksu, todėl pirmasis elementas bus raudonas, tada trečias ir tt:

Funkcinis žymėjimas didesniam lankstumui

Norėdami pasirinkti atskirą elementą, galite naudoti vieną sveikąjį skaičių, pavyzdžiui:

li:nth-child(4) {
color: red;
}

Šiuo atveju parinkiklis atitinka tik ketvirtą sąrašo elementą:

Ši sintaksė yra ypatingas bendresnės funkcinės sintaksės atvejis, kai parenkami elementai, atitinkantys nurodytą šabloną. Ši sintaksė yra:

:nth-child(An+B) {
/*...*/
}

Šiame užraše A yra žingsnio dydis. Tai reiškia, kiek kartų parinkiklis pajuda, kad pasirinktų kitą elementą. Tai leidžia pasirinkti kiekvieną kitą elementą, kas trečią elementą ir pan. B yra atspirties taškas, nuo kurio prasideda atranka.

Pavyzdžiui, paimkite argumentą 3n+1:

li:nth-child(3n+1) {
color: red;
}

Pasirinkimas prasidės nuo pirmojo elemento, o po to bus tęsiamas kas trečias:

Palyginkite tai su išraiška 3n+2:

li:nth-child(3n+2) {
color:red;
}

Tai vis tiek pasirenka kas trečią elementą, bet dabar pradedama nuo antrojo sąrašo elemento:

Kitas įdomus pavyzdys yra: nth-child (n+3):

li:nth-child(n+3) {
color: red;
}

Tai pasirinks kiekvieną elementą (n), pradedant nuo trečiojo (+3). Tai atrodys taip:

Taip pat galite naudoti atimtį, kad pasiektumėte tam tikrus rezultatus:

li:nth-child(3n-1) {
color: red;
}

Šiame pavyzdyje vis dar pasirenkamas kas trečias elementas, bet jis prasideda nuo „minuso pirmiau“. Iš tikrųjų tai reiškia, kad jis pasirinks antrąjį sąrašo elementą, tada penktą ir pan.:

Iš Sintaksė

Taip pat galite naudoti raktinį žodį apie po jo seka a parinkiklis kaip argumentą :nth-child() parinkiklyje. Ši sintaksė leidžia susiaurinti galimus elementus, iš kurių pasirenkamas įprastas šablonas.

Pavyzdžiui, įsivaizduokite, kad jūsų žymėjimas yra sudėtingesnis nei originalas:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Dabar naudokite :nth-child, kad pasirinktumėte lyginius elementus iš tų, kurie turi tam tikrą klasę, rinkinio:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Atkreipkite dėmesį, kaip raudoni yra tik poriniai paryškinti elementai:

Taip pat apsvarstykite, kuo tai skiriasi nuo li.new: n-tas vaikas (lyginis) kuri nukreipta į naujus elementus, bet tik tuo atveju, jei jie yra lygūs. Tai būtų 2 ir 6 punktai aukščiau pateiktame pavyzdyje.

Darbas su :nth-child() parinkikliu

Galite sukurti unikalų dizainą naudodami parinkiklį :nth-child(). Galite kurti spalvingas svetaines ir paryškinti eilutes bei stulpelius duomenų lentelėse. Sujungę jį su kitais CSS parinkikliais, galėsite sukurti sudėtingus maketus ir dizainus.