CSS Reference Manual

CSS @rules (RULES)

Complete CSS Properties

CSS Functions (Functions)Comprehensive Manual of CSS Selectors

CSS3 :nth-last-child() selector

:nth-last-child() This CSS pseudo-class matches elements from the end of the sibling nodes that are in certain positions. Note: This pseudo-class and :nth-child is consistent with basic, but it counts from the end rather than from the beginning.

Complete CSS Selector Reference Manual

Online Example

Specify the background color and font effect of the table's tr:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
<style>　
table {
　　border:　1px solid blue;
}
/*　Select the last three elements　*/
tr:nth-last-child(-n+3)　{
　　background-color: pink;
}
/*　Select each element from the second item to the last item　*/
tr:nth-last-child(n+2)　{
　　color: blue;
}
/*　Select only the second last element　*/
tr:nth-last-child(2)　{
　　font-weight:　600;
}
</style>
</head>
<body>
</table>
　　</tbody>
　　　　<tr>
　　　　　　<td>Row 1</td>/td>
　　　　</tr>
　　　　<tr>
　　　　　　　<td>Row 2</td>/td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>Row 3</td>/td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　<td>Row 4</td>/td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　<td>Row 5</td>/td>
　　　　</tr>
　　</tbody>
</table>
</body>
</html>

Test and See ‹/›

Definition and Usage

:nth-last-The child(n) selector matches each element that is the Nth child of its element, regardless of the element type, counting from the last child.

nIt can be a number, a keyword, or a formula.

Tip: See also:nth-last-of-type() Selector. This selector matches the nth structural child element from the end of the parent element.

Selector examples

tr:nth-last-child(odd) or tr:nth-last-child(2n+1)
　　　 representing the odd rows of the HTML table from the end:1,3,5.

tr:nth-last-child(even) or tr:nth-last-child(2n)
　　　 representing the even rows of the HTML table from the end:2,4,6.

:nth-last-child(7)
　　　 representing the nth from the end7element.

:nth-last-child(5n)
　　　 representing the nth from the end5,10,15.

:nth-last-child(3n+4)
　　　 representing the nth from the end4,7,10,13.

:nth-last-child(-n+3)
　　　 representing the last three elements in a group of sibling nodes.

p:nth-last-child(n) or p:nth-last-child(n+1)
　　　 represents each <p> element in a group of sibling nodes. This is the same as a simple p selector. (Since n starts from 0, the last element is1Starting from, n and n+1They will select the same elements.)

p:nth-last-child(1) or p:nth-last-child(0n)+1)
　　　 It represents all elements that are the last in their sibling nodes <p>. This is the same as :last-The child selector is the same.

Browser Compatibility

The numbers in the table indicate the first browser version that supports this attribute.

Selector
:nth-last-child()	4.0	9.0	3.5	3.2	9.6

Example 1

Odd and even can be used as keywords to match child elements, whose indices are odd or even.

Here, we specify two different background colors for the p elements with odd and even indices in reverse order:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
<style>　
p:nth-last-child(odd)
{
　　　　background:#ff0000;
}
p:nth-last-child(even)
{
　　　　background:#0000ff;
}
</style>
</head>
<body>
<p> First Paragraph.</p>
<p> Second Paragraph.</p>
<p> Third Paragraph.</p>
<p><b>Attention:</b> Internet Explorer　8　And earlier versions of browsers do not support :nth-last-child() Selector.</p>
</body>
</html>

Test and See ‹/›

Example 2

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 two different background colors for the p elements with all indices3of the p elements specified the background color in reverse order of their multiples:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
<style>　
p:nth-last-child(3n+0)
{
　　　　background:#ff0000;
}
</style>
</head>
<body>
<h1>This is the 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>Attention:</b> Internet Explorer　8　And earlier versions of browsers do not support :nth-last-child() Selector.</p>
</body>
</html>

Test and See ‹/›

Complete CSS Selector Reference Manual

CSS Functions (Functions)Comprehensive Manual of CSS Selectors