Nth-last-child psevdo-sinfi

nth-last-child psevdo-sinfi valideynin sonundan saymaqla n-ci elementi olan elementi seçir. nth-child kimi davranir, ancaq sayma sonundan baslayir.

Sintaksis

cssselektor:nth-last-child(ədəd | odd | even | ifadə) {
  
}

Dəyərlər

Dəyər	Izah
ədəd	`1`-dən baslayaraq müsbət ədəd. Ünvanlandirmaq istədiyimiz elementin nömrəsini təyin edir. Elementlərin nömrələnməsi `1`-dən baslayır.
`odd`	Tək elementlər.
`even`	Cüt elementlər.
ifadə	N hərfi ile xüsusi ifadələr qura bilərsiniz, bu hərf sıfırdan (bir deyil) sonsuzluğa qədər olan bütün tam ədədləri ifadə edir. Beləliklə, `2n` - bütün cüt nömrələri deməkdir (ikincidən baslayaraq). Bunu necə başa düşmək olar? `n`-də ardıcıl olaraq `0` və s. ədədləri əvəz edirik: əgər n = 0-dırsa, 2n 0 verəcək - belə bir element yoxdur (elementlərin nömrələnməsi 1-dən baslayır), əgər n = 1-dirsə, 2n 2 verəcək - ikinci element, əgər n = 2-dirsə, 2n 4 verəcək - dördüncü element. Əgər 3n yazsaq - bu hər üçüncü element deməkdir (üçüncüdən baslayaraq) və s.

Nümunə

Bu nümunədə biz, öz valideyninin sonundan saymaqla 4-cü elementi olan li-ni qırmızı rəngdə edəcəyik:

html<ul>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
</ul>

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

Результат:

Nümunə

İndi sonundan saymaqla bütün cüt li elementlərini qırmızı edək:

html<ul>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
</ul>

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

Результат:

Nümunə

İndi sonundan saymaqla bütün tək li elementlərini qırmızı edək:

html<ul>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
</ul>

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

Результат:

Nümunə

İndi sonundan saymaqla hər üçüncü li elementi qırmızı edək:

html<ul>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
  <li>siyahı elementi</li>
</ul>

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

Результат: