Razumevanje izbirnika CSS :nth-child().

Kot vsi izbirniki CSS lahko uporabite :nth-child() za prepoznavanje elementov na spletni strani in zanje uporabite sloge. Toda ta izbirnik vam omogoča, da zožite nabor bratov in sester glede na njihov relativni položaj.

Izbirnik podpira nekaj osnovnih ključnih besed za običajne primere, ponuja pa tudi zmogljivo sintakso za ujemanje vzorcev. Z njim lahko izberete elemente na podlagi običajnih, ponavljajočih se vzorcev ali bolj zapletenih definicij glede na vaše potrebe.

Sintaksa izbirnika :nth-child().

Kot Izbirnik psevdorazreda CSS, se sintaksa :nth-child() razlikuje od drugih izbirnikov. Kot vzorec za ujemanje elementov v nizu bratov in sester vzame argument:

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

Glavni poudarek je na argumentih v oklepajih. Ti argumenti določajo podmnožico elementov, ki jih je treba izbrati.

Uporaba vrednosti ključnih besed za pogoste primere

Ta izbirnik lahko sprejme dve vrednosti ključnih besed: Čuden in celo. Še posebej so uporabni za oblikovanje nadomestnih vrstic v tabeli.

Preprost urejen seznam je še en dober primer, kdaj lahko uporabite te vrednosti ključnih besed:

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

Uporabljati :nth-child (liho) izbirnik, lahko spremenite barvo vsakega nadomestnega elementa:

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

Elementi se začnejo pri indeksu 1, zato bo prvi element prikazan rdeče, nato tretji in tako naprej:

Funkcionalni zapis za večjo prilagodljivost

Za izbiro posameznega elementa lahko uporabite eno samo celo število, kot je ta:

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

V tem primeru se izbirnik ujema samo s četrtim elementom na seznamu:

Ta sintaksa je poseben primer bolj splošne funkcionalne sintakse, ki izbere elemente, ki se ujemajo z danim vzorcem. Ta sintaksa je:

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

V tem zapisu je A je velikost koraka. To pomeni, kolikokrat se izbirnik premakne, da izbere naslednji element. Omogoča vam izbiro vsakega drugega elementa, vsakega tretjega predmeta itd. B je izhodišče, kjer se začne izbira.

Na primer, vzemite argument 3n+1:

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

S tem se bo izbor začel pri prvem elementu in nadaljeval z vsakim tretjim elementom za tem:

Primerjaj to z izrazom 3n+2:

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

To še vedno izbere vsak tretji element, vendar se zdaj začne od drugega elementa na seznamu:

Drug zanimiv primer je :nth-child (n+3):

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

Ta bo izbral vsak element (n), začenši s tretjim (+3). Videti bo takole:

Za doseganje določenih rezultatov lahko uporabite tudi odštevanje:

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

Ta primer še vedno izbere vsak tretji element, vendar se začne od »minus prvi«. Dejansko to pomeni, da bo izbral drugi element na seznamu, nato petega in tako naprej:

The od Sintaksa

Uporabite lahko tudi ključno besedo od sledi a selektor kot argument v izbirniku :nth-child(). Ta sintaksa vam omogoča, da zožite možne elemente, med katerimi izbira običajni vzorec.

Na primer, predstavljajte si, da je vaša oznaka bolj zapletena od izvirnika:

<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>

Zdaj uporabite :nth-child, da izberete sode elemente iz niza tistih z določenim razredom:

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

Upoštevajte, da so samo sodo oštevilčeni krepki elementi rdeči:

Upoštevajte tudi, kako se to razlikuje od li.novo: n-ti otrok (sodo) ki cilja na .nove elemente, vendar le, če so sodi. To bi bili postavki 2 in 6 v zgornjem primeru.

Delo z izbirnikom :nth-child().

Z izbirnikom :nth-child() lahko dosežete edinstven dizajn. Ustvarite lahko barvita spletna mesta in poudarite vrstice in stolpce v podatkovnih tabelah. Kombinacija z drugimi izbirniki CSS vam bo pomagala ustvariti zapletene postavitve in dizajne.