: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' в этой спецификации.
Рекомендация Изначальное определение

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

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 4.0 3.5 (1.9.1) 9.0 9.5 3.2
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка 2.1 1.0 (1.9.1) 9.0 10.0 3.2

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

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: BychekRU
 Обновлялась последний раз: BychekRU,