: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 июль 2015 г..
* Some parts of this feature may have varying levels of support.
Описание
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 ...
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>
... будет выглядеть, как :
Спецификации
| Specification |
|---|
| Selectors Level 4 # nth-last-child-pseudo |
Совместимость с браузерами
Loading…