Kichujio cha nth-last-child

Kichujio nth-last-child huchagua kipengele ambacho ni mzaliwa wa n-th wa mzazi, kuhesabu kutoka mwisho. Hufanya kazi kama nth-child, lakini kuhesabu hufanyika kutoka mwisho.

Syntax

csskichaguzi:nth-last-child(nambari | odd | even | usemi) {
  
}

Maadili

Thamani	Maelezo
nambari	Nambari chanya kuanzia `1`. Inabainisha nafasi ya kipengele ambacho tunataka kukirejelea. Nambari za vipengele huanzia `1`.
`odd`	Vipengele visivyo vya kawaida.
`even`	Vipengele vya kawaida.
usemi	Inawezekana kutengeneza misemo maalum na herufi n, ambayo inawakilisha nambari zote kamili kutoka sifuri (si moja) hadi infinity. Kwa hivyo, `2n` - inamaanisha nambari zote za kawaida (zikianzia kwa ya pili). Je, hii inaelewaje? Badilisha `n` mfululizo nambari kutoka `0` na kadhalika: ikiwa n = 0, basi 2n itatoa 0 - kipengele kama hicho hakipo (nambari za vipengele zinaanza na 1), ikiwa n = 1, basi 2n itatoa 2 - kipengele cha pili, ikiwa n = 2, 2n inatoa 4 - kipengele cha nne. Ikiwa utaandika 3n - hii itakuwa kila kipengele cha tatu (zikianzia kwa cha tatu), na kadhalika.

Mfano

Katika mfano huu, tutafanya rangi nyekundu kile li ambacho ni kipengele cha 4 kutoka mwisho cha mzazi wake:

html<ul>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
</ul>

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

Результат:

Mfano

Sasa tutafanya nyekundu yote li zenye nambari za kawaida kutoka mwisho:

html<ul>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
</ul>

cssli:nth-last-child(even) {
  color: red;
}

Результат:

Mfano

Sasa tutafanya nyekundu zote zisizo za kawaida kutoka mwisho li:

html<ul>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
</ul>

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

Результат:

Mfano

Sasa tutafanya nyekundu kila li ya tatu kutoka mwisho:

html<ul>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
  <li>kipengele cha orodha</li>
</ul>

cssli:nth-last-child(3n) {
  color: red;
}

Результат: