CSS псевдокласс :nth-last-of-type()
Псевдокласс :nth-last-of-type() выбирает элементы, считая с последнего. Узнайте о псевдоклассе и попробуйте примеры.
Псевдокласс CSS :nth-last-of-type() сопоставляет элементы заданного типа, считая с последнего элемента этого типа среди его соседних элементов. Он является зеркальным отображением :nth-of-type(), который считает с первого.
Это полезно, когда количество элементов неизвестно или изменяется динамически, а вам нужно стилизовать элементы относительно конца списка — например, выделить несколько последних строк таблицы или финальные пункты меню навигации, независимо от того, сколько элементов им предшествует.
Синтаксис
Псевдокласс принимает один аргумент в скобках: число, ключевое слово или формулу.
:nth-last-of-type( <nth> ) {
/* style declarations */
}| Значение | Описание |
|---|---|
number | Сопоставляет ровно n-й элемент своего типа, считая с конца (1 = последний). |
odd / even | Сопоставляет элементы на нечётных или чётных позициях, считая с конца. |
an + b | Сопоставляет каждый a-й элемент, начиная со смещения b, считая с конца. a и b — целые числа, n принимает значения 0, 1, 2, …. |
Как работает формула an + b
Браузер подставляет n = 0, 1, 2, … в формулу и сохраняет каждую полученную позицию. Счёт всегда начинается с последнего элемента соответствующего типа:
2n(то же, чтоeven) → позиции 2, 4, 6, … с конца.2n + 1(то же, чтоodd) → позиции 1, 3, 5, … с конца.3n + 1→ позиции 1, 4, 7, … с конца.-n + 3→ последние три элемента (позиции 3, 2, 1 с конца).
Отличие от схожих селекторов
:nth-of-type()сопоставляет те же элементы, но начинает счёт с начала, а не с конца.:nth-last-child()также считает с конца, но учитывает все дочерние элементы, а не только одного типа.:nth-last-of-type()игнорирует соседние элементы других типов при счёте. Специфичность обоих одинакова.
Смотрите также :last-of-type, который эквивалентен :nth-last-of-type(1).
Примеры
Выбор конкретной позиции с конца
Здесь :nth-last-of-type(3) выбирает третий абзац, считая с конца — то есть «Paragraph 4» в списке из шести.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(3) {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:nth-last-of-type() selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>Использование ключевых слов odd и even
При счёте с конца odd сопоставляет 1-й, 3-й, 5-й, … абзацы («Paragraph 6», «Paragraph 4», «Paragraph 2»), а even — 2-й, 4-й, 6-й, … («Paragraph 5», «Paragraph 3», «Paragraph 1»). Вместе они стилизуют каждый абзац двумя чередующимися цветами.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-last-of-type(even) {
background: #666666;
color: #eeeeee;
}
</style>
</head>
<body>
<h2>:nth-last-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>Использование формулы (an + b)
При девяти абзацах 3n + 1 сопоставляет каждый третий абзац, считая с конца — позиции 1, 4 и 7 с конца, то есть 9-й, 6-й и 3-й абзацы в порядке документа.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(3n+1) {
background: #767fea;
padding: 10px;
color: #ffffff;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eighth paragraph.</p>
<p>The ninth paragraph.</p>
</body>
</html>Выбор последних N элементов
Отрицательный коэффициент — идиоматический способ выбрать несколько последних элементов. -n + 3 сопоставляет последние три абзаца независимо от их общего количества:
p:nth-last-of-type(-n + 3) {
font-weight: bold;
}Поддержка браузерами и спецификация
:nth-last-of-type() поддерживается во всех современных браузерах. Определён в: