CSS :nth-of-type() Pseudo-Class – Select the nth Child of the Same Tag

Definition and Usage

:nth-of-type(n) pseudo-class selector Selects the element that is the nth sibling of the same tag type among its parent’s children.

For example, p:nth-of-type(2) selects the second <p> element among only the <p> elements that share the same parent.

Basic Example

HTML

<section>
    <p>First 'p' element of its type</p>
    <div>First 'div' element of its type</div>
    <p>Second 'p' element of its type</p>
    <p>Third 'p' element of its type</p>
    <div>Second 'div' element of its type</div>
    <div>Third 'div' element of its type</div>
</section>

CSS

/* Selects the second <p> element of its type among <section> children */
section p:nth-of-type(2) {
    background-color: yellowgreen;
}

/* Selects the second <div> element of its type among <section> children */
section div:nth-of-type(2) {
    background-color: orange;
}

Syntax

CSS

/* Positive integers: select the nth <li> element of its type under the same parent */
li:nth-of-type(1)  /* counts only the <li> elements under the same parent and selects the first one */
li:nth-of-type(7)  /* counts only the <li> elements under the same parent and selects the seventh one */

/* Keywords: odd / even */
li:nth-of-type(odd)  /* counts only the <li> elements under the same parent and selects the odd ones (1, 3, 5, ...) */
li:nth-of-type(even) /* counts only the <li> elements under the same parent and selects the even ones (2, 4, 6, ...) */

/* Formulas: An+B */
li:nth-of-type(2n)  /* counts only the <li> elements under the same parent and selects every 2nd element */
li:nth-of-type(3n)  /* counts only the <li> elements under the same parent and selects every 3rd element */

li:nth-of-type(3n+1) /* counts only the <li> elements under the same parent and selects every 3rd element plus 1 */
li:nth-of-type(3n-1) /* counts only the <li> elements under the same parent and selects every 3rd element minus 1 */

Formal Syntax

The :nth-of-type(n) pseudo-class uses a single parameter n to specify which element(s) of the same tag type to select.

Parameter `n` Values

The parameter n in the :nth-of-type(n) pseudo-class specifies which element(s) of the same tag type 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-of-type(n) Pseudo-Class
`odd`	Selects all odd-numbered elements of the same tag type among sibling elements (1, 3, 5, 7, ...)
`even`	Selects all even-numbered elements of the same tag type among sibling elements (2, 4, 6, 8, ...)

HTML

<section>
    <p>First 'p' element of its type</p>
    <div>First 'div' element of its type</div>
    <p>Second 'p' element of its type</p>
    <p>Third 'p' element of its type</p>
    <div>Second 'div' element of its type</div>
    <div>Third 'div' element of its type</div>
</section>

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-of-type(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, elements at positions 5, 10, 15, ... are selected.
 * In summary, 5n selects every 5th element of the same tag type.
*/

:nth-of-type(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 of the same tag type.
*/

:nth-of-type(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 of the same tag type.
*/

:nth-of-type(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, elements at positions 1, 2, 3, ... are selected.
 * In summary, n selects all elements of the same tag type.
*/

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

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

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

Things to Keep in Mind

The :nth-of-type(n) pseudo-class selector selects the nth element of the same tag type among sibling elements.

"Same tag type" refers to the element's tag name.

Consider the following example:

HTML

<style>
    .red-item:nth-of-type(2) {
        color: red;
        font-weight: bold;
    }
</style>
<ol>
    <li>li</li>
    <li class="red-item">Matched element</li>
    <li class="red-item">Expected match but not selected</li>
</ol>
<!--
    * Did you try to select the second element of type '.red-item'?
    * If so, that is incorrect.
    *
    * .red-item:nth-of-type(2) can be broken down as follows:
    * => .red-item: selects elements with a class attribute value of 'red-item' whose tag name is <li>.
    * => The "same tag type" refers to the tag name type.
    * => The element type here is <li>.
    * => The second <li> element is selected only if it has the class 'red-item'.
    * => Therefore, <li class="red-item">Matched element</li> is selected.
-->

If you are not aware that "same tag type" means the tag name, the :nth-of-type(n) pseudo-class may seem to not work correctly!

Browser compatibility

Browser Compatibility for the :nth-of-type() Pseudo-Class
Selector	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`:nth-of-type()`	1	12	3.5	3.1

Specifications

Specification for the :nth-of-type() Pseudo-Class
Specification
`:nth-of-type()`	Selectors Level 4 #nth-of-type-pseudo

References

MDN - :nth-of-type()

Definition and Usage

Basic Example

Syntax

Formal Syntax

Parameter n Values

Non-negative Integer Index

Keyword Values (odd or even)

Custom Pattern: An+B

Things to Keep in Mind

Browser compatibility

Specifications

References

See also

Parameter `n` Values

Keyword Values (`odd` or `even`)

Custom Pattern: `An+B`