Псевдокласс nth-last-of-type выбирает
элемент, который является n-ным потомком
родителя заданного типа, отсчитывая с конца.
Ведет себя аналогично nth-of-type,
только отсчет ведется с конца.
Синтаксис
селектор:nth-last-of-type(число | odd | even | выражение) {
}
:
Значения
| Значение | Описание |
|---|---|
| число |
Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться.
Нумерация элементов начинается с 1.
|
odd |
Нечетные элементы. |
even |
Четные элементы. |
| выражение |
Можно составлять специальные выражения с буквой n, которая обозначает
все целые числа от нуля (не от единицы!) до бесконечности.
Так, 2n - значит все четные числа (начиная со второго). Как это понять?
Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 -
такого элемента нет (нумерация элементов с 1!), если n = 1, то 2n даст 2 - второй элемент,
если n = 2, 2n дает 4 - четвертый элемент.
Если написать 3n - это будет каждый третий элемент (начиная с третьего!), и так далее.
|
Пример
Найдем h2, который является 2-ым h2
в родителе с конца:
<div>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Пример
Найдем все четные h2 с конца:
<div>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Пример
Найдем все нечетные h2 с конца:
<div>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
<h2>заголовок</h2>
<p>абзац</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
: