:nth-last-child

Описание

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

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

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

Синтаксис

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

Примеры

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

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

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

Этот CSS ...

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

... с этим 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>

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

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

Спецификация Статус Комментарий
Selectors Level 4
Определение ':nth-last-child' в этой спецификации.
Рабочий черновик Без изменений
Selectors Level 3
Определение ':nth-last-child' в этой спецификации.
Рекомендация Изначальное определение

Поддержка браузерами

BCD tables only load in the browser

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