Псевдоклас nth-last-of-type
Псевдокласът 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;
}
:
