Izpratne par CSS :nth-child() atlasītāju

Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Tāpat kā visus CSS atlasītājus, varat izmantot :nth-child(), lai identificētu tīmekļa lapas elementus un piemērotu tiem stilus. Taču šis atlasītājs ļauj sašaurināt brāļu un māsu kopu, pamatojoties uz viņu relatīvo stāvokli.

MUO dienas video RITINĀT, LAI TURPINĀTU AR SATURU

Atlasītājs atbalsta dažus pamata atslēgvārdus bieži sastopamiem gadījumiem, taču tas nodrošina arī jaudīgu raksta atbilstības sintaksi. Izmantojot to, varat atlasīt elementus, pamatojoties uz regulāriem, atkārtotiem modeļiem vai sarežģītākām definīcijām, pamatojoties uz jūsu vajadzībām.

:nth-child() atlasītāja sintakse

Kā CSS pseidoklases atlasītājs , :nth-child() sintakse atšķiras no citiem atlasītājiem. Tas izmanto argumentu kā modeli elementu saskaņošanai brāļu un māsu komplektā:

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

Galvenā uzmanība tiek pievērsta iekavās norādītajiem argumentiem. Šie argumenti nosaka atlasāmo elementu apakškopu.

Atslēgvārdu vērtību izmantošana bieži sastopamiem gadījumiem

Šis atlasītājs var uzņemt divas atslēgvārdu vērtības: nepāra un pat . Tie ir īpaši noderīgi alternatīvu rindu veidošana tabulā .

Vienkāršs sakārtots saraksts ir vēl viens labs piemērs tam, kad varat izmantot šīs atslēgvārdu vērtības:

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

Izmantojot :nth-child(nepāra) atlasītāju, varat mainīt katra alternatīvā vienuma krāsu:

kā izveidot sāknēšanas disku

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

Vienumi sākas ar indeksu 1, tāpēc pirmais vienums būs sarkans, tad trešais un tā tālāk:

Numurēts saraksts ar septiņiem priekšmetiem. Vienumi pirmajā, trešajā, piektajā un septītajā pozīcijā ir sarkani.

Funkcionāls apzīmējums lielākai elastībai

Varat izmantot vienu veselu skaitli, lai atlasītu atsevišķu elementu, piemēram:

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

Šajā gadījumā atlasītājs atbilst tikai ceturtajam saraksta vienumam:

Numurēts saraksts ar septiņiem priekšmetiem. Vienums ceturtajā pozīcijā ir sarkans.

Šī sintakse ir vispārīgākas funkcionālās sintakses īpašs gadījums, kas atlasa vienumus, kas atbilst konkrētajam modelim. Šī sintakse ir:

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

Šajā apzīmējumā A ir soļa izmērs. Tas nozīmē, cik reižu atlasītājs pārvietojas, lai atlasītu nākamo vienumu. Tas ļauj atlasīt katru otro vienumu, katru trešo vienumu utt. B ir sākuma punkts, kur sākas atlase.

Piemēram, ņemiet argumentu 3n+1:

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

Tas sāks atlasi pie pirmā vienuma un turpinās ar katru trešo vienumu pēc tam:

Numurēts saraksts ar septiņiem priekšmetiem. Vienumi pirmajā, ceturtajā un septītajā pozīcijā ir sarkani.

Salīdziniet to ar izteiksmi 3n+2:

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

Tas joprojām atlasa katru trešo vienumu, bet tagad tas sākas no otrā vienuma sarakstā:

kāpēc mans diska lietojums ir 100

Numurēts saraksts ar septiņiem priekšmetiem. Vienumi otrajā un piektajā pozīcijā ir sarkani.

Vēl viens interesants piemērs ir :nth-child(n+3):

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

Tas atlasīs katru vienumu (n), sākot no trešā (+3). Tas izskatīsies šādi:

Numurēts saraksts ar septiņiem priekšmetiem. Vienumi no trešās līdz septiņām pozīcijām ir sarkani.

Varat arī izmantot atņemšanu, lai sasniegtu noteiktus rezultātus:

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

Šajā piemērā joprojām tiek atlasīts katrs trešais vienums, bet tas sākas ar mīnusu vispirms. Faktiski tas nozīmē, ka tas atlasīs otro vienumu sarakstā, pēc tam piekto un tā tālāk:

kā atbloķēt tālruni bez maksas

No sintakse

Varat arī izmantot atslēgvārdu no kam seko a atlasītājs kā argumentu :nth-child() atlasītājā. Šī sintakse ļauj sašaurināt iespējamos vienumus, no kuriem atlasa parastā shēma.

Piemēram, iedomājieties, ka jūsu marķējums ir sarežģītāks nekā oriģināls:

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

Tagad izmantojiet :nth-child, lai atlasītu pāra vienumus no to kopas, kurām ir noteikta klase:

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

Ievērojiet, kā sarkani ir tikai pāra skaitļu treknrakstā norādītie vienumi:

Numurēts saraksts ar septiņiem priekšmetiem. Vienumi trešajā un sestajā pozīcijā ir sarkani.

Apsveriet arī, kā tas atšķiras no li.new:nth-child(pāra) kas attiecas uz .jauniem elementiem, bet tikai tad, ja tie ir pāra. Tas būtu 2. un 6. punkts iepriekš minētajā piemērā.

Darbs ar :nth-child() atlasītāju

Varat izveidot unikālus dizainus, izmantojot atlasītāju :nth-child(). Varat izveidot krāsainas vietnes un izcelt rindas un kolonnas datu tabulās. Apvienojot to ar citiem CSS atlasītājiem, varēsit izveidot sarežģītus izkārtojumus un dizainus.