CSS :nth-last-child() Pseudo-class

Paglalarawan at Paggamit

CSS :nth-last-child(n) Ang pseudo-class ay ginamit upang piliin ang bawat elementong anak na pangalawang huling anak ng kanyang magulang element, kahit anong uri ito.

n maaaring maging isang numero/index, isang keyword (odd o even）o isang formula (tulad ng an + b）。

Mga Payo:Tingnan :nth-last-of-type() Ang pseudo-class ay ginamit upang piliin ang bawat elementong anak na pangalawang huling anak ng kanyang magulang element, kahit anong uri ito. n ang mga elementong anak ng isang elementong anak.

Halimbawa

Mga Halimbawa 1

Inilagay namin ang kulay ng background para sa bawat <p> na siya ay pangalawang huling anak ng kanyang magulang element.

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

Subukan Ngayon

Mga Halimbawa 2

odd at even ay keyword na maaring gamitin upang tumugma sa mga anak na may kahalong o kahalong indeks.

Dito, inilagay namin ang magkakaibang kulay ng background para sa lahat ng <p> na may indeks na kahalong o kahalong na pagsusunod:

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

Subukan Ngayon

Mga Halimbawa 3

Ginamit ang formula (an + b）。Paglalarawan:a ay integer step, n ay lahat ng positibong integer mula sa 0,b ay integer offset.

Dito, inilagay namin ang kulay ng background para sa lahat ng <p> na may indeks na tatlong pagsusunod na nagsasama ng 0:

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

Subukan Ngayon

Grammar ng CSS

:nth-last-child(index | odd | even | an+b) {
  declarasyon ng css;
}

Detalye ng Teknolohiya

Suporta ng Browser

Ang mga numero sa talahanayan ay inilalarawan ang unang bersyon ng browser na ganap na sumusuporta sa pseudo-class.