Псевдоклас nth-last-child

Псевдокласът nth-last-child избира елемент, който е n-ти потомък на родителя, отброявайки от края. Държи се аналогично на nth-child, само че отброяването е от края.

Синтаксис

cssселектор:nth-last-child(число | odd | even | израз) {
  
}

Стойности

Стойност	Описание
число	Положително число започващо от `1`. Задава номера на елемента, към който искаме да се обърнем. Номерацията на елементите започва от `1`.
`odd`	Нечетни елементи.
`even`	Четни елементи.
израз	Могат да се съставят специални изрази с буквата n, която обозначава всички цели числа от нула (не от единица) до безкрайност. Така, `2n` - означава всички четни числа (започвайки от второто). Как да разберем това? Заместваме в `n` последователно числа от `0` и нататък: ако n = 0, то 2n ще даде 0 - такъв елемент няма (номерацията на елементите е от 1), ако n = 1, то 2n ще даде 2 - втори елемент, ако n = 2, 2n дава 4 - четвърти елемент. Ако напишем 3n - това ще бъде всеки трети елемент (започвайки от третия), и така нататък.

Пример

В този пример ще направим в червен цвят този li, който е 4-ти от края потомък на своя родител:

html<ul>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
</ul>

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

Результат:

Пример

Сега в червено ще направим всички четни от края li:

html<ul>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
</ul>

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

Результат:

Пример

Сега в червено ще направим всички нечетни от края li:

html<ul>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
</ul>

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

Результат:

Пример

Сега в червено ще направим всеки трети от края li:

html<ul>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
  <li>елемент от списък</li>
</ul>

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

Результат: