nth-last-child жалған сыныбы
nth-last-child жалған сыныбы
ата-ананың соңынан санағандағы n-ші ұрпағы
болып табылатын элементті таңдайды. nth-child
сияқты әрекет етеді,
тек санау соңынан басталады.
Синтаксис
cssселектор:nth-last-child(сан | odd | even | өрнек) {
}
Мәндері
| Мән | Сипаттама |
|---|---|
| сан |
1-ден басталатын оң сан.
Біз қол жеткізгіміз келетін элементтің
номерін көрсетеді. Элементтердің нөмірлеуі 1-ден басталады.
|
odd |
Тақ элементтер. |
even |
Жұп элементтер. |
| өрнек |
n әрпімен арнайы өрнектер құрастыруға болады,
ол нөлден (бірден емес)
шексіздікке дейінгі барлық бүтін сандарды білдіреді. Сонымен, 2n - барлық жұп
сандарды білдіреді (екіншіден бастап).
Мұны қалай түсінуге болады? n-ге ретімен
0-ден бастап сандарды қоямыз: егер n = 0 болса, онда 2n 0 береді -
мұндай элемент жоқ (элементтерді нөмірлеу 1-ден басталады),
егер n = 1 болса, онда 2n 2 береді - екінші элемент, егер n = 2 болса,
2n 4 береді - төртінші элемент. Егер 3n жазсақ - бұл
әр үшінші элемент болады (үшіншіден бастап), және т.с.с.
|
Мысал
Бұл мысалда біз қызыл түсті
соңынан санағанда 4-ші li
ұрпағына жасаймыз:
html<ul>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
</ul>cssli:nth-last-child(4) {
color: red;
}
Результат:
Мысал
Қазір қызыл түсті барлық
соңынан жұп li-лерге жасаймыз:
html<ul>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
</ul>cssli:nth-last-child(even) {
color: red;
}
Результат:
Мысал
Қазір қызыл түсті барлық соңынан тақ
li-лерге жасаймыз:
html<ul>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
</ul>cssli:nth-last-child(odd) {
color: red;
}
Результат:
Мысал
Қазір қызыл түсті әр үшінші
соңынан li-ге жасаймыз:
html<ul>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
<li>тізім нәрсесі</li>
</ul>cssli:nth-last-child(3n) {
color: red;
}
Результат: