CSS :nth-child() Pseudo-Class Selector

Definition and Usage

The :nth-child(n) pseudo-class selects the element that is the nth child of its parent.
For example, :nth-child(2) selects the second child element.

Basic Example

Syntax

CSS

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

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

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

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

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

:nth-child(3n+1)    /* Selects every 3rd child starting from the first (1, 4, 7, ...) */
:nth-child(3n-1)    /* Selects every 3rd child minus one (2, 5, 8, ...) */

Formal Syntax

The :nth-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-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

Assign a non-negative integer to select the corresponding child element. Indexing starts at 1.

Keyword Values (`odd` or `even`)

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

Custom Pattern: `An+B`

You can select elements whose index satisfies the An+B formula:

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.

CSS

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

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

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

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

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

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-child(5n-1) { /* Selects elements one before multiples of 5 */
    background-color: yellowgreen;
}