CSS псевдокласс :nth-last-child
Псевдокласс CSS :nth-last-child() выбирает элементы начиная с последнего. Узнайте, как использовать, примеры.
Псевдокласс :nth-last-child() сопоставляет элементы на основе их позиции среди группы дочерних элементов, считая от последнего элемента в обратном направлении. Это зеркальное отражение :nth-child(): вместо счёта с начала, он считает с конца.
Это делает его правильным инструментом, когда вас интересует расстояние элемента от конца списка — например, для стилизации последнего элемента, нескольких последних элементов или «всех элементов, кроме последнего». Поскольку счёт начинается снизу, правило продолжает работать даже при добавлении или удалении элементов в начале списка.
Аргумент в скобках может быть одним числом, ключевым словом (odd / even) или формулой An+B.
Отличие от :nth-child()
Оба псевдокласса считают среди дочерних элементов, но в противоположных направлениях:
:nth-child(1)сопоставляет первый дочерний элемент.:nth-last-child(1)сопоставляет последний дочерний элемент (эквивалент:last-child).
Таким образом, li:nth-last-child(2) всегда нацелен на предпоследний элемент списка, независимо от количества элементов перед ним. Используйте :nth-last-child(), когда ваша стилизация привязана к концу группы, а не к её началу.
Примечание:
:nth-last-child()считает все дочерние элементы независимо от типа. Если нужно считать только дочерние элементы одного типа (начиная с конца), используйте вместо него:nth-last-of-type().
Значения-ключевые слова
odd
Выбирает элементы с нечётными порядковыми номерами (например, 1, 3, 5, 7 и т.д.).
even
Выбирает элементы с чётными порядковыми номерами (например, 2, 4, 6, 8 и т.д.).
Функциональная запись
<An+B>
Выбирает элементы, числовая позиция которых (считая от последнего дочернего элемента) соответствует шаблону An+B, вычисляемому для каждого неотрицательного целого значения n (0, 1, 2, …). Индекс последнего элемента равен 1. A и B должны быть целыми числами и могут быть отрицательными: A определяет шаг (длину шаблона), а B — смещение.
Некоторые распространённые формулы, с учётом направления счёта:
| Формула | Совпадения (считая с конца) |
|---|---|
2n | Каждый 2-й элемент (even) |
2n+1 | Каждый второй элемент, начиная с последнего (odd) |
3 | Только 3-й с конца элемент |
n+3 | 3-й с конца элемент и всё, что перед ним |
-n+3 | Только последние 3 элемента |
Версия
Синтаксис
CSS :nth-last-child синтаксис
selector:nth-last-child() {
css declarations;
}Пример селектора :nth-last-child():
Пример CSS :nth-last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(1) {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Здесь p:nth-last-child(1) выбирает абзац, который является последним дочерним элементом своего родителя, поэтому только второй абзац получает синий фон.
Пример ключевых слов "odd" и "even":
Пример кода CSS :nth-last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(odd) {
background: #1c87c9;
color: #eee;
}
p:nth-last-child(even) {
background: #666;
color: #eee;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Считая с конца, Paragraph 3 находится на позиции 1 (нечётная), Paragraph 2 — на позиции 2 (чётная), а Paragraph 1 — на позиции 3 (нечётная). Таким образом, Paragraph 1 и Paragraph 3 используют правило odd, а Paragraph 2 — правило even.
Пример :nth-last-child() с тегом <table>:
Примечание: чтобы tr был выбран, он должен быть прямым дочерним элементом tbody или table.
Пример кода CSS :nth-last-child с тегом table
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid #8EBF41;
border-spacing: 10px;
font-family: sans-serif;
}
table tr {
background-color: #cccccc;
}
/* Selects the last three elements */
tr:nth-last-child(-n+3) {
background-color: #8EBF41;
}
table tr td {
padding: 10px;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n+2) {
color: #ffffff;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 900;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<table>
<tbody>
<tr>
<td>First row</td>
</tr>
<tr>
<td>Second row</td>
</tr>
<tr>
<td>Third row</td>
</tr>
<tr>
<td>Fourth row</td>
</tr>
<tr>
<td>Fifth row</td>
</tr>
</tbody>
</table>
</body>
</html>Пример :nth-last-child() с тегом <li>:
Пример кода CSS :nth-last-child с тегом ul
<!DOCTYPE html>
<html>
<head>
<style>
/* Selects the last three list items */
li:nth-last-child(-n+3),
li:nth-last-child(-n+3) ~ li {
color: #8EBF41;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
</ol>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
<li>List Item Five</li>
<li>List Item Six</li>
</ol>
</body>
</html>Обратите внимание, что li:nth-last-child(-n+3) сочетается с селектором общего соседнего элемента (~ li), чтобы последние три элемента списка надёжно выделялись в разных браузерах. Во втором списке (шесть элементов) последние три — «Four», «Five» и «Six» — окрашиваются в зелёный цвет.
Связанные селекторы
:nth-child()— та же идея, но счёт ведётся с первого дочернего элемента.:nth-of-type()— считает только дочерние элементы одного типа, начиная с начала.:nth-last-of-type()— считает дочерние элементы одного типа с конца.:last-child— сокращение, эквивалентное:nth-last-child(1).