:nth-last-child

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Описание

CSS псевдокласс :nth-last-child(an+b) находит элемент, имеющий an+b-1 потомков после данной позиции в дереве документа, значение для n может быть положительным или нулевым, а также имеющий родительский элемент.

В результате, он функционирует так же, как и :nth-child, кроме того, что выбирает элементы, считая в обратном порядке, с конца списка потомков, не с начала.

Смотрите :nth-child для более тщательного описания синтаксиса его аргументов.

Синтаксис

element:nth-last-child(an + b) { стили }

Примеры

Пример селекторов

tr:nth-last-child(-n+4): Находит последние 4 строки HTML таблицы.
span:nth-last-child(even): Ищет чётные элементы в родительском элементе, начиная с последнего элемента и работая задом наперёд.

Использование

Этот CSS ...

css

table {
  border: 1px solid blue;
}
tr:nth-last-child(-n + 3) {
  /* последние 3 потомка */
  background-color: lime;
}

... с этим HTML ...

html

<table>
  <tbody>
    <tr>
      <td>Первая</td>
    </tr>
    <tr>
      <td>Вторая строка</td>
    </tr>
    <tr>
      <td>Третья</td>
    </tr>
    <tr>
      <td>Четвёртая</td>
    </tr>
    <tr>
      <td>Пятая строчка</td>
    </tr>
  </tbody>
</table>

... будет выглядеть, как :

Спецификации

Specification
Selectors Level 4 # nth-last-child-pseudo

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

:nth-child