English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-last-child() этот CSS-псевдо-класс из брата-узлов из конца к началу соответствует элементам, находящимся в определённых положениях. Замечание: этот псевдо-класс очень похож на :nth-child, но он учитывает конец, а не начало.
Полное руководство по CSS-селекторам
Указать цвет фона и эффект шрифта для table's tr:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Базовый учебник (oldtoolbag.com)</title>
<style>
table {
border: 1px solid blue;
}
/* Выбирает последние три элемента */
tr:nth-last-child(-n+3) {
background-color: pink;
}
/* Выбирает каждый элемент от второго до последнего */
tr:nth-last-child(n+2) {
color: blue;
}
/* Выбирает только второй последний элемент */
tr:nth-last-child(2) {
font-weight: 600;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Первый ряд</td>
</tr>
<tr>
<td>Второй ряд</td>
</tr>
<tr>
<td>Третий ряд</td>
</tr>
<tr>
<td>Четвертый ряд</td>
</tr>
<tr>
<td>Пятый ряд</td>
</tr>
</tbody>
</table>
</body>
</html>Проверьте, посмотрите <‹/›>:nth-last-child(n) этот выборщик соответствует каждому элементу, который является nth-подэлементом в его элементе, независимо от типа, начиная с последнего подэлемента.
nЭто может быть цифра, ключевое слово или формула.
Совет: См. также:nth-last-of-type() Этот выборщик соответствует последнему nth-структурному подэлементу в родительском элементе.
tr:nth-last-child(odd) или tr:nth-last-child(2n+1)
Это означает нечетные строки таблицы HTML: 1, 3, 5 и т.д.
tr:nth-last-child(even) или tr:nth-last-child(2n)
Это означает четные строки таблицы HTML: 2, 4, 6 и т.д.
:nth-last-child(7)
Это означает элемент, который занимать 7-е место.
:nth-last-child(5n)
Это означает элементы, которые занимают 5-е, 10-е, 15-е и т.д. места.
:nth-last-child(3n+4)
Это означает элементы, которые занимают 4-е, 7-е, 10-е, 13-е и т.д. места.
:nth-last-child(-n+3)
Это означает последние три элемента в группе братьев.
p:nth-last-child(n) или p:nth-last-child(n+1)
Это означает каждый элемент <p> в группе братьев. Это равно простому выборщику p.
p:nth-last-child(1) или p:nth-last-child(0n+1)
Это означает все элементы, которые являются последними в группе братьев.
Числа в таблице показывают версию первого браузера, поддерживающего этот свойство.
| Выборщик | |||||
|---|---|---|---|---|---|
| :nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Четные и нечетные числа могут использоваться в качестве ключевых слов для соответствия подэлементам, индекс которых является четным или нечетным.
Здесь мы указываем два разных цвета фона для элементов p с обратным порядком, которые являются четными и нечетными:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Базовый учебник (oldtoolbag.com)</title>
<style>
p:nth-last-child(odd)
{
background:#ff0000;
}
p:nth-last-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<p>Первый абзац.</p>
<p>Второй абзац.</p>
<p>Третий абзац.</p>
<p><b>Внимание:</b> браузеры Internet Explorer 8 и более ранние версии не поддерживают селектор :nth-last-child().</p>
</body>
</html>Проверьте, посмотрите <‹/›>Используя формулу (an + b). Описание: a представляет собой размер цикла, N — это счетчик (начиная с 0), а b — смещение.
Здесь мы указываем цвет фона для p элементов с индексом, являющимся кратным 3, в обратном порядке:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Базовый учебник (oldtoolbag.com)</title>
<style>
p:nth-last-child(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>Первый абзац.</p>
<p>Второй абзац.</p>
<p>Третий абзац.</p>
<p>Четвертый абзац.</p>
<p>Пятый абзац.</p>
<p>Шестой абзац.</p>
<p>Седьмой абзац.</p>
<p>Восьмой абзац.</p>
<p>Девятый абзац.</p>
<p><b>Внимание:</b> браузеры Internet Explorer 8 и более ранние версии не поддерживают селектор :nth-last-child().</p>
</body>
</html>Проверьте, посмотрите <‹/›>