CSS :nth-last-child() Pseudo-Class – Select the nth Child Element from the End

Definition and Usage

:nth-last-child(n) is a pseudo-class selector that selects an element that is the nth child of its parent, counting from the end.
For example, :nth-last-child(2) selects the second child element when counting backward from the last child.

Basic Example

Syntax

CSS

/* Positive integers: select the nth child from the end */
:nth-last-child(1)       /* Selects the first child element from the end */
li:nth-last-child(1)     /* Selects the first <li> element from the end among its siblings */

:nth-last-child(7)       /* Selects the seventh child element from the end */
li:nth-last-child(7)     /* Selects the seventh <li> element from the end among its siblings */

/* Keywords: even / odd */
:nth-last-child(odd)     /* Selects all odd-numbered children counting from the end (1, 3, 5, ...) */
li:nth-last-child(even)  /* Selects all even-numbered <li> elements counting from the end (2, 4, 6, ...) */

/* Formulas: An+B */
:nth-last-child(2n)      /* Selects every 2nd child counting from the end (2, 4, 6, ...) */
li:nth-last-child(2n)    /* Selects every 2nd <li> element counting from the end */

:nth-last-child(3n)      /* Selects every 3rd child counting from the end (3, 6, 9, ...) */
li:nth-last-child(3n)    /* Selects every 3rd <li> element counting from the end */

:nth-last-child(3n+1)    /* Selects every 3rd child plus 1, counting from the end (1, 4, 7, ...) */
:nth-last-child(3n-1)    /* Selects every 3rd child minus 1, counting from the end (2, 5, 8, ...) */

Formal Syntax

The :nth-last-child(n) pseudo-class uses a single parameter n to specify which child element(s) to select.

Parameter `n` Values

The parameter n in the :nth-last-child(n) pseudo-class specifies which child element(s) of the parent to select. You can assign values to n in three ways:

Non-negative integer index
Keyword values (odd or even)
Custom pattern in the form An+B

Non-negative Integer Index

부모 요소의 자식 요소 중에서 음이 아닌 정수로 뒤부터 인덱스를 매겨 그 순서에 맞는 요소를 선택합니다. 인덱스는 1부터 시작합니다.

Keyword Values (`odd` or `even`)

Keyword Values for the :nth-last-child(n) Pseudo-Class
`odd`	Selects all odd-numbered children counting from the end (1, 3, 5, 7, ...)
`even`	Selects all even-numbered children counting from the end (2, 4, 6, 8, ...)

Custom Pattern: `An+B`

You can select elements whose index satisfies the An+B formula, counting from the end:

A is the step increment (integer)
B is an offset (integer, optional)
n represents all non-negative integers (0, 1, 2, …)

This allows you to pick elements based on custom patterns from the end.

CSS

:nth-last-child(5n)
/*
 * 0 [=5×0], 5 [=5×1], 10 [=5×2], 15 [=5×3], ... positions from the end.
 * Indexing starts at 1 from the last child, so the 0th element does not exist. 
 * Therefore, elements at positions 5, 10, 15, ... counting from the end are selected.
 * In summary, 5n selects every 5th element from the end.
*/

:nth-last-child(5n-1)
/*
 * -1 [=5×0-1], 4 [=5×1-1], 9 [=5×2-1], 14 [=5×3-1], ... positions from the end.
 * Indexing starts at 1 from the last child, so the -1st element does not exist. 
 * Therefore, elements at positions 4, 9, 14, ... from the end are selected.
 * In summary, 5n-1 selects one element before each multiple of 5 from the end.
*/

:nth-last-child(5n+1)
/*
 * 1 [=5×0+1], 6 [=5×1+1], 11 [=5×2+1], 16 [=5×3+1], ... positions from the end.
 * Indexing starts at 1 from the last child. 
 * Therefore, elements at positions 1, 6, 11, 16, ... from the end are selected.
 * In summary, 5n+1 selects one element after each multiple of 5 from the end.
*/

:nth-last-child(n)
/*
 * 0 [0], 1 [1], 2 [2], 3 [3], ... positions from the end.
 * Indexing starts at 1 from the last child, so the 0th element does not exist.
 * Therefore, 1, 2, 3, ... elements counting from the end are selected.
 * In summary, n selects all child elements counting from the end.
*/

As shown in this example, using the An+B formula with the :nth-last-child(n) pseudo-class allows you to pattern and style elements systematically from the end.

HTML

<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>

CSS

ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 7px;
}
ol li {
    aspect-ratio: 1/0.5;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
ol li:nth-last-child(5n-1) {/* Selects elements one before every multiple of 5, counting from the end */
    background-color: yellowgreen;
}

As shown in this example, using a custom pattern in the form of An+B with the :nth-last-child(n) pseudo-class selector makes it easy to pattern and select elements systematically.