Psewdoklas nth-last-child

Psewdoklas nth-last-child, ahyryndan hasaplap, ata-enanyň n-inji nesilini saýlaýar. nth-child psewdoklasyna meňzeýär, ýöne hasaplama ahyrdan başlaýar.

Sintaksis

csssaýlaýjy:nth-last-child(san | odd | even | ifade) {
  
}

Bahalar

Baha	Düşündiriş
san	`1`-den başlap, pozitiw san. Ýüz tutmak isleýän elementimiziň nomerini berýär. Elementleriň nomirlenmesi `1`-den başlaýar.
`odd`	Taq sanly elementler.
`even`	Jübüt sanly elementler.
ifade	n harpy bilen ýörite ifadeler düzüp bolýar, n noldan (birden däl) başlap, ähessizlik çenli bolan ähli bitin sanlary aňladýar. Şeýlelik bilen, `2n` - ähli jübüt sanlary aňladýar (ikinjiden başlap). Muny nädip düşünmeli? `n` üçin yzygiderlik bilen `0` we ş.m. sanlary goýýarys: eger n = 0 bolsa, 2n 0 berer - şeýle element ýok (elementleriň nomirlenmesi 1-den başlaýar), eger n = 1 bolsa, 2n 2 berer - ikinji element, eger n = 2 bolsa, 2n 4 berer - dördünji element. 3n ýazsaňyz - bu üçünji elementden başlap her üçünji element bolar, we ş.m.

Mysal

Bu mysalda, ata-enasynyň ahyryndan 4-inji nesili bolan li elementini gyzyl reňk ederis:

html<ul>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
</ul>

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

Результат:

Mysal

Indi ahyryndan jübüt sanly bolan ähli li elementlerini gyzyl ederis:

html<ul>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
</ul>

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

Результат:

Mysal

Indi ahyryndan taq sanly bolan ähli li elementlerini gyzyl ederis:

html<ul>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
</ul>

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

Результат:

Mysal

Indi ahyryndan her üçünji li elementini gyzyl ederis:

html<ul>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
  <li>sanaw elementi</li>
</ul>

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

Результат: