Псеўдаклас 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;
}
:
