:nth-last-child
:nth-last-child
该:nth-last-child(an+b)
CSS伪类匹配的是一个在它之后有an+b-1
个的同胞元素的元素,其中n
是正数或零。它本质与:nth-child
是一样的,除了它从后向前
计数项目而不是从前往后
。
/* Selects every fourth child element inside the body */
/* regardless of element type */
/* counting backwards from the last one */
body :nth-last-child(4n) {
background-color: lime;
}
见:nth-child
对于其参数的语法有更全面的描述。
语法
:nth-last-child( <nth> [ of <selector># ]? )where
<nth> = <an-plus-b> | even | odd
实例
示例选择器
tr:nth-last-child(-n+4)
表示HTML表格的最后四行。
示例用法
HTML
<table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
CSS
table {
border: 1px solid blue;
}
/* Select the last three elements */
tr:nth-last-child(-n+3) {
background-color: lime;
}
结果
规范
Specification | Status | Comment |
---|---|---|
Selectors Level 4The definition of ':nth-last-child' in that specification. | Working Draft | Matching elements are not required to have a parent. |
Selectors Level 3The definition of ':nth-last-child' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 4 | (Yes) | 3.5 (1.9.1) | 9.0 | 9.5 | 3.2 |
No parent required | 57 | ? | 51 (51)1 | ? | 44 | ? |
Feature | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | 1.0 (1.9.1) | 9.0 | 10 | 3.2 |
No parent required | 57 | 57 | ? | 51.0 (51)1 | ? | 44 | ? |