CSS :nth-last-of-type() Pseudo-class

Pagsasakop at Paggamit

CSS :nth-last-of-type(n) Ang pseudo-class ay ginamit upang piliin ang elemento kung saan ito ay ang pinalamang elemento ng kanyang magulang element kung saan ito ay ang pangalawang pinalamang elementong nasa kanyang magulang element. n ang bawat elemento ng isang pangkat ng mga elemento.

n Maaaring maging isang numero/index, isang keyword (odd o even) o isang formula (tulad ng an + b).

Paalala:Tingnan :nth-last-child() Ang pseudo-class ay ginamit upang piliin ang elemento kung saan ito ay ang pinalamang elemento ng kanyang magulang element kung saan ito ay ang pangalawang pinalamang elementong nasa kanyang magulang element. n ang elemento ng isang pangkat ng mga elemento, kahit anong uri.

Eksemplo

Halimbawa 1

Binibigay din ang kulay ng background sa lahat ng <p> elements kung saan ito ay ikalawang huli ng kanyang magulang <p> element.

Pati na rin, binibigay namin ang kulay ng background sa lahat ng <li> elements kung saan ito ay ikatlong huli ng kanyang magulang <li> element.

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-of-type(3) {
background: yellow;
}

Subukan Lang

Halimbawa 2

odd at even Ang keyword na maaring gamitin upang pagpili ng sub-element kung saan ang index ay kahit na ganap o pinakamaliit na index (ang index ng unang sub-element ay 1).

Dito, binibigay namin ang magkakaibang kulay ng background sa lahat ng <p> elements kung saan ang index ay kahit na ganap o pinakamaliit na index.

p:nth-last-of-type(odd) {
  background: red;
}
p:nth-last-of-type(even) {
  background: blue;
}

Subukan Lang

Halimbawa 3

Ginamit ang formula (an + b). Paglalarawan: a ay ang integer step, n ay ang lahat ng non-negative integers mula sa 0, at b ay ang integer offset.

Dito, binibigay namin ang kulay ng background sa lahat ng <p> at <li> elements kung saan ang index ay tatlong pahibalo ng huli.

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

Subukan Lang

CSS Grammar

:nth-last-of-type(index | odd | even | an+b) {
  css declarations;
}

Teknikal na Detalye

Browser Support

Ang mga numero sa talahanan ay nagtutukoy sa unang bersyon ng browser na ganap na sumusuporta sa pseudo-class.