CSS

: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; }

结果

规范

SpecificationStatusComment
Selectors Level 4The definition of ':nth-last-child' in that specification.Working DraftMatching elements are not required to have a parent.
Selectors Level 3The definition of ':nth-last-child' in that specification.RecommendationInitial definition.

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4(Yes)3.5 (1.9.1)9.09.53.2
No parent required57?51 (51)1?44?

FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support(Yes)(Yes)(Yes)1.0 (1.9.1)9.0103.2
No parent required5757?51.0 (51)1?44?