English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-last-of-type(an+b) This CSS pseudo-class matches those that have an+b-1 elements of the same type as its preceding sibling, where n is a positive or zero value. It is essentially the same as :nth-of-type is the same, but it counts from the end in reverse order, not from the beginning.
Complete CSS Selector Reference Manual
Give the last2span elements fill the background color:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
span:nth-last-of-type(2) {
background-color: lime;
}
</style>
</head>
<body>
<div>
<span>This is a span.</span>
<span>This is another range.</span>
<em>Emphasis.</em>
<span>Wow, this range has become blurred! </span>
<strike>This was deleted.</strike>
<span>This is the last span.</span>
</div>
</body>
</html>Test and see ‹/›:nth-last-of-type( <nth> ) where <nth> = <an-plus-b> | even | odd
:nth-last-of-type(n)selector matches the nth last sibling element of the same type.
n It can be a number, a keyword, or a formula.
Tip:Please refer to::nth-last-child()selector. This selector matches the nth last structural child element of the parent element.
The numbers in the table indicate the first browser version number that supports this attribute.
| selector | |||||
|---|---|---|---|---|---|
| :nth-last-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Odd and even can be used as keywords to match child elements whose index is odd or even.
Here, we specify two different background colors for odd and even reverse p elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
p:nth-last-of-type(odd)
{
background:#ff0000;
}
p:nth-last-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the fourth paragraph.</p>
</div>
</body>
</html>Test and see ‹/›Using the formula (an+ b) Description: a represents the size of a loop, N is a counter (starting from 0), and b is the offset.
Here, we specify the background color for all index3of p elements specified with background color in reverse order of their multiplicative inverses:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
p:nth-last-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>
<p>Fifth paragraph.</p>
<p>Sixth paragraph.</p>
<p>Seventh paragraph.</p>
<p>Eighth paragraph.</p>
<p>Ninth paragraph.</p>
<p><b>Notice:</b> Internet Explorer 8 and earlier versions of browsers do not support :nth-last-child() selector.</p>
</body>
</html>Test and see ‹/›