Псевдокласс CSS :nth-last-child
Псевдокласс :nth-last-child() выбирает элементы на основе их индекса, начиная с последнего элемента и двигаясь вверх.
Псевдокласс :nth-last-child() может быть задан числом, ключевым словом или формулой.
Значения ключевых слов
odd
Выбирает элементы с нечётными номерами индексов (например, 1, 3, 5, 7 и т. д.).
even
Выбирает элементы с чётными номерами индексов (например, 2, 4, 6, 8 и т. д.).
Функциональная нотация
<An+B>
Выбирает элементы, чья числовая позиция соответствует шаблону An+B (для каждого неотрицательного целого значения n). Индекс первого элемента равен 1, а n в формуле начинается с 0. Значения A и B должны быть целыми числами и могут быть отрицательными. A определяет длину шаблона, а B определяет смещение.
Версия
Синтаксис
Синтаксис 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>Пример использования ключевых слов "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>Пример использования :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>Практика
Что верно относительно псевдокласса nth-last-child в CSS?