Псевдокласс 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 жазсақ - бұл
әрбір үшінші элемент болады (үшіншіден бастап), және т.с.с.
|
Мысал
Ата анасында соңынан санағанда 2-ші h2
болып табылатын 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;
}
:
