CSS :nth-last-child() peittokuvatyyppi

Määritelmä ja käyttö

CSS :nth-last-child(n) Peittokuvat valitsevat jokaisen elementin, joka on oman vanhempiensa kymmenennessä lapsi elementin tyypistä riippumatta.

n Voisi olla luku/index, avainsana (epäparillinen tai parillinen) an + b}

Vinkki:Katso :nth-last-of-type() Peittokuvat valitsevat jokaisen elementin, joka on oman vanhempiensa kymmenennessä lapsi elementin tyypistä riippumatta. n lapsielementin elementti.

Esimerkki

Esimerkki 1

Asetamme taustavärin kaikille <p>-elementeille, jotka ovat oman vanhempiensa viimeinen toinen lapsi:

p:nth-last-child(2) {
  background-color: red;
}

Kokeile itse

Esimerkki 2

epäparillinen ja parillinen On avainsana, jota voidaan käyttää vastataksesi indeksillä parillisia tai epäparillisia lapsielementtejä.

Tässä asetamme eri taustavärin kaikille <p>-elementeille, joiden viimeinen indeksi on parillinen tai epäparillinen:

p:nth-last-child(odd) {
  background-color: red;
}
p:nth-last-child(even) {
  background-color: blue;
}

Kokeile itse

Esimerkki 3

Käytä kaavaa (an + bKuvaus:a Edustaa kokonaislukulaskua, n on kaikki ei-negatiiviset kokonaisluvut alkuperästä 0:b On kokonaislukupoisku.

Tässä asetamme taustavärin kaikille <p>-elementeille, joiden viimeinen indeksi on kolmen potenssin yhteen jakautuva luku:

p:nth-last-child(3n+0) {
  background-color: red;
}

Kokeile itse

CSS-syntax

:nth-last-child(indeksi jopa | parillinen | yhteen jakautuva | an+b) {
  css-declarationit;
}

Tekninen yksityiskohta

Selaimen tuki

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