:nth-last-child
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨Ð¸ÑÐ»Ñ 2015 г.â©.
* Some parts of this feature may have varying levels of support.
ÐпиÑание
CSS пÑевдоклаÑÑ :nth-last-child(an+b) наÑ
Ð¾Ð´Ð¸Ñ ÑлеменÑ, имеÑÑий an+b-1 поÑомков поÑле данной позиÑии в деÑеве докÑменÑа, знаÑение Ð´Ð»Ñ n Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ð¿Ð¾Ð»Ð¾Ð¶Ð¸ÑелÑнÑм или нÑлевÑм, а Ñакже имеÑÑий ÑодиÑелÑÑкий ÑлеменÑ.
Ð ÑезÑлÑÑаÑе, он ÑÑнкÑиониÑÑÐµÑ Ñак же, как и :nth-child, кÑоме Ñого, ÑÑо вÑбиÑÐ°ÐµÑ ÑлеменÑÑ, ÑÑиÑÐ°Ñ Ð² обÑаÑном поÑÑдке, Ñ ÐºÐ¾Ð½Ñа ÑпиÑка поÑомков, не Ñ Ð½Ð°Ñала.
СмоÑÑиÑе :nth-child Ð´Ð»Ñ Ð±Ð¾Ð»ÐµÐµ ÑÑаÑелÑного опиÑÐ°Ð½Ð¸Ñ ÑинÑакÑиÑа его аÑгÑменÑов.
СинÑакÑиÑ
element:nth-last-child(an + b) { ÑÑили }
ÐÑимеÑÑ
ÐÑÐ¸Ð¼ÐµÑ ÑелекÑоÑов
tr:nth-last-child(-n+4)-
ÐÐ°Ñ Ð¾Ð´Ð¸Ñ Ð¿Ð¾Ñледние 4 ÑÑÑоки HTML ÑаблиÑÑ.
span:nth-last-child(even)-
ÐÑÐµÑ ÑÑÑнÑе ÑлеменÑÑ Ð² ÑодиÑелÑÑком ÑлеменÑе, наÑÐ¸Ð½Ð°Ñ Ñ Ð¿Ð¾Ñледнего ÑлеменÑа и ÑабоÑÐ°Ñ Ð·Ð°Ð´Ð¾Ð¼ напеÑÑд.
ÐÑполÑзование
ÐÑÐ¾Ñ CSS ...
table {
border: 1px solid blue;
}
tr:nth-last-child(-n + 3) {
/* поÑледние 3 поÑомка */
background-color: lime;
}
... Ñ ÑÑим HTML ...
<table>
<tbody>
<tr>
<td>ÐеÑваÑ</td>
</tr>
<tr>
<td>ÐÑоÑÐ°Ñ ÑÑÑока</td>
</tr>
<tr>
<td>ТÑеÑÑÑ</td>
</tr>
<tr>
<td>ЧеÑвÑÑÑаÑ</td>
</tr>
<tr>
<td>ÐÑÑÐ°Ñ ÑÑÑоÑка</td>
</tr>
</tbody>
</table>
... бÑÐ´ÐµÑ Ð²ÑглÑдеÑÑ, как :
СпеÑиÑикаÑии
| Specification |
|---|
| Selectors Level 4 # nth-last-child-pseudo |