CSS :nth-child() -seudolaji

Määrittely ja käyttö

CSS :nth-child(n)}} tekoiluista valitaan sen vanhemman elementin lapsen listaan kuuluvat elementit. n lapsen

Tämä tekoilu määrittää elementin sen vanhemman elementin lapsen listan indeksin perusteella.

n voi olla luku/index, avainsana (parillinen tai yhtenäinen) tai kaava (esim. an + b)

Vinkki:Katso :nth-of-type() tekoiluista valitaan sen vanhemman elementin lapsen listaan kuuluvat elementit.samanlaiset (nimike)n n lapsen elementtiä.

Esimerkki

Esimerkki 1

Kuinka käyttää :nth-child() Tekoilu:

/* Valitaan kaikista veljeksistä neljännessä elementissä oleva elementti */
:nth-child(4) {
  background-color: keltainen;
}
/* Valitaan div-sivutilan toinen elementti */
div:nth-child(2) {
  background-color: punainen;
}
/* Valitaan listan toinen li-elementti */
li:nth-child(2) {
  background-color: vaaleansininen;
}

Kokeile itse

Esimerkki 2

parillinen ja yhtenäinen On avainsana, jota voidaan käyttää yhdistämään parillisten tai epäparillisten indeksien lapsen elementit (ensimmäisen lapsen indeksi on 1).

Tässä me määrittelemme eri taustavärin parillisten ja epäparillisten <p>-elementtien:

p:nth-child(parillinen) {
  background-color: punainen;
}
p:nth-child(yhtenäinen) {
  background: vaaleansininen;
}

Kokeile itse

Esimerkki 3

Käytä kaavaa (an + b) Kuvaus:a Edustaa kokonaislukujen askelta, n on kaikki nollasta lähtien olevat ei-negatiiviset kokonaisluvut,b On kokonaisluku etäisyys.

Tässä me määrittelemme taustavärin kaikille <p>-elementeille, joiden indeksi on kolmen kerran jakaja (valitaan kolmas, kuudes, yhdeksäs jne. elementti):

p:nth-child(3n+1) {
  background-color: punainen;
}

Kokeile itse

Esimerkki 4

Tässä me määrittelemme taustavärin kaikille <p>-elementeille, joiden indeksi on kolmen kerran jakaja. sitten vähennämme 1 (valitaan ensimmäinen, neljäs, seitsemäs jne. elementti):

p:nth-child(3n-1) {
  background-color: punainen;
}

Kokeile itse

CSS-grammatiikka

:nth-child(indeksi | parillinen | yhtenäinen | an+b) {
  css-deklaratiot;
}

Tekninen tarkistus

Versio: CSS3

Selaimen tuki

Taulukossa olevat numerot määrittelevät ensimmäisen selaimen version, joka täysin tukee tätä tekoiluista.

Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 9.6