CSS :nth-child() -valitsimen ymmärtäminen

Kuten kaikki CSS-valitsimet, voit käyttää :nth-child()-funktiota verkkosivun elementtien tunnistamiseen ja niihin tyylejen soveltamiseen. Mutta tällä valitsimella voit rajata sisarusten joukkoa heidän suhteellisen asemansa perusteella.

Valitsija tukee joitain perusavainsanoja yleisissä tapauksissa, mutta se tarjoaa myös tehokkaan kuvionsovitussyntaksin. Sen avulla voit valita elementtejä säännöllisten, toistuvien kuvioiden tai monimutkaisempien määritelmien perusteella tarpeidesi perusteella.

:nth-child() -valitsimen syntaksi

Kuten a CSS-pseudoluokan valitsin, :nth-child() -syntaksi eroaa muista valitsimista. Se ottaa argumentin mallina elementtien yhteensovittamiseksi sisarusten joukossa:

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

Pääpaino on suluissa olevissa argumenteissa. Nämä argumentit määrittelevät valittavien elementtien osajoukon.

Avainsanaarvojen käyttäminen yleisissä tapauksissa

Tämä valitsin voi sisältää kaksi avainsanaarvoa:

outo ja jopa. Ne ovat erityisen hyödyllisiä taulukon vaihtoehtoisten rivien muotoilu.

Yksinkertainen järjestetty luettelo on toinen hyvä esimerkki siitä, kuinka voit käyttää näitä avainsanaarvoja:

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

Käyttämällä :nth-lapsi (pariton) valitsin, voit muuttaa kunkin vaihtoehtoisen kohteen väriä:

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

Kohteet alkavat indeksistä 1, joten ensimmäinen kohde näkyy punaisena, sitten kolmas ja niin edelleen:

Toiminnallinen merkintä lisää joustavuutta

Voit käyttää yksittäistä kokonaislukua yksittäisen elementin valitsemiseen seuraavasti:

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

Tässä tapauksessa valitsin vastaa vain luettelon neljättä kohtaa:

Tämä syntaksi on yleisemmän toiminnallisen syntaksin erikoistapaus, joka valitsee tiettyä mallia vastaavat kohteet. Tämä syntaksi on:

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

Tässä merkinnässä A on askelkoko. Tämä tarkoittaa, kuinka monta kertaa valitsin siirtyy valitakseen seuraavan kohteen. Sen avulla voit valita joka toisen kohteen, joka kolmannen kohteen jne. B on aloituspiste, josta valinta alkaa.

Otetaan esimerkiksi argumentti 3n+1:

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

Tämä aloittaa valinnan ensimmäisestä kohdasta ja jatkaa joka kolmannella sen jälkeen:

Vertaa tätä lausekkeeseen 3n+2:

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

Tämä valitsee edelleen joka kolmannen kohteen, mutta nyt se alkaa luettelon toisesta kohteesta:

Toinen mielenkiintoinen esimerkki on :nth-child (n+3):

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

Tämä valitsee jokaisen kohteen (n) alkaen kolmannesta (+3). Se näyttää tältä:

Voit myös käyttää vähennyslaskua tiettyjen tulosten saavuttamiseksi:

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

Tämä esimerkki valitsee edelleen joka kolmannen kohteen, mutta se alkaa "miinus ensin". Käytännössä tämä tarkoittaa, että se valitsee luettelon toisen kohteen, sitten viidennen ja niin edelleen:

The of Syntaksi

Voit myös käyttää avainsanaa / jota seuraa a valitsin argumenttina valitsimessa :nth-child(). Tämän syntaksin avulla voit rajata mahdollisia kohteita, joista tavallinen kuvio valitsee.

Kuvittele esimerkiksi, että merkintäsi on monimutkaisempi kuin alkuperäinen:

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

Käytä nyt :nth-child valitaksesi parilliset kohteet tietyn luokan kohteiden joukosta:

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

Huomaa, että vain parilliset lihavoitut kohteet ovat punaisia:

Mieti myös, miten tämä eroaa li.uusi: n-lapsi (parillinen) joka kohdistuu .uusiin elementteihin, mutta vain jos ne ovat parillisia. Nämä olisivat kohdat 2 ja 6 yllä olevassa esimerkissä.

Työskentely :nth-child()-valitsimen kanssa

Voit luoda ainutlaatuisia malleja :nth-child() -valitsimella. Voit luoda värikkäitä verkkosivustoja ja korostaa rivejä ja sarakkeita tietotaulukoissa. Sen yhdistäminen muihin CSS-valitsimiin auttaa sinua luomaan monimutkaisia ​​asetteluja ja malleja.