:nth-last-child CSS Pseudo Class


The CSS :nth-last-child pseudo-class is a powerful selector that allows you to target and style elements based on their position within a parent element, counting from the end of the parent's list of children. It is used in conjunction with the :nth-child family of pseudo-classes to provide fine-grained control over the styling of specific elements.

Here's a basic explanation of how :nth-last-child works:
- nth-last-child(n) selects elements that are the nth child from the end of their parent. For example, :nth-last-child(1) selects the last child, :nth-last-child(2) selects the second-to-last child, and so on.

This pseudo-class is particularly useful for creating styles for the last few elements in a list or container, regardless of how many elements there are. It's commonly used in scenarios where you want to apply different styles to the last few items in a dynamic list or to create visual effects like highlighting the last item.

Here's an example of how you might use :nth-last-child in CSS:

/* Select and style the second-to-last child element */
ul li:nth-last-child(2) {
font-weight: bold;
color: #FF5733;

In this example, the CSS rule selects the second-to-last <li> element within a <ul> and applies a specific style to it.

Overall, :nth-last-child is a valuable tool for achieving precise and dynamic styling in CSS.


element:nth-last-child (odd | even | <number> | <expression>) {
  /* ... */


  • oddAll odd item numbers.
  • evenAll even item numbers.
  • <number>The serial number of the child relative to its parent. Numbering starts with 1, this will be the first item in the list.
  • <expression>It is given in the form an ± b , where a and b are integers, and n is a counter that automatically takes the value 0, 1, 2 ...
If a is zero, then it is not written and the record is reduced to b. If b is zero, then it is also not specified and the expression is written in the form an. a and b can be negative numbers, in which case the plus sign changes to minus, for example: 5n-1.
By using negative values ​​of a and b, some results can also turn out to be negative or equal to zero. However, elements are affected only by positive values ​​due to the numbering of elements starting at 1.


table { 
width: 100%;
border-collapse: collapse;
border-spacing: 0;
td {
border: 1px solid #333;
padding: 3px;
border-left: 3px double #333;
td:nth-last-child(2n+1) {
background: #a3ffa8;
td:nth-child(1) {
border: 1px solid #333;
background: #d9a3ff;

Browser Support

The following table will show you the current browser support for the CSS :nth-last-child pseudo class.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023