Definition and Usage

:nth-last-of-type(n) pseudo-class selector Selects the element that is the nth sibling of the same tag type, counting from the end among its parent's children.

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

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

Basic Example

HTML 
<section>
    <p>The third 'p' tag from the last, among only the 'p' tags</p>
    <div>The third 'div' tag from the last, among only the 'div' tags</div>
    <p>The second 'p' tag from the last, among only the 'p' tags</p>
    <p>The first 'p' tag from the last, among only the 'p' tags</p>
    <div>The second 'div' tag from the last, among only the 'div' tags</div>
    <div>The first 'div' tag from the last, among only the 'div' tags</div>
</section>
CSS 
/* Selects the third 'p' tag from the last, among only the 'p' tags, within <section> */
section p:nth-last-of-type(3) {
    background-color: yellowgreen;
}

/* Selects the last 'div' tag, among only the 'div' tags, within <section> */
section div:nth-last-of-type(1) {
    background-color: orange;
}
Rendered Output

Syntax

CSS 
/* Positive integers: n-th element */
li:nth-last-of-type(1) /* Counts only <li> siblings of the same type and
                          selects the first from the last */
li:nth-last-of-type(7) /* Counts only <li> siblings of the same type and
                          selects the seventh from the last */

/* Keywords: even / odd */
li:nth-last-of-type(odd) /* Counts only <li> siblings of the same type and
                            selects odd-numbered elements from the last (1, 3, 5, ...) */
li:nth-last-of-type(even) /* Counts only <li> siblings of the same type and 
                             selects even-numbered elements from the last (2, 4, 6, ...) */

/* Formulas: An+B */
li:nth-last-of-type(2n) /* Counts only <li> siblings of the same type and
                           selects every 2nd element from the last */
li:nth-last-of-type(3n) /* Counts only <li> siblings of the same type and
                           selects every 3rd element from the last */
li:nth-last-of-type(3n+1) /* Counts only <li> siblings of the same type and
                             selects every 3rd element from the last plus 1 */
li:nth-last-of-type(3n-1) /* Counts only <li> siblings of the same type and
                             selects every 3rd element from the last minus 1 */

Formal Syntax

CSS 
:nth-last-of-type(n) {
    /* ... */
}

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

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:

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

Non-negative Integer Index

Assign a non-negative integer to select the corresponding child element of the same tag type, counting from the end. Indexing starts at 1.

HTML 
<section>
    <p>The second 'p' tag from the last, among only the 'p' tags</p>
    <div>The first 'div' tag from the last, among only the 'div' tags</div>
    <p>The first 'p' tag from the last, among only the 'p' tags</p>
</section>
CSS 
section p:nth-last-of-type(1) {
    background-color: yellowgreen;
}
Rendered Output

Keyword Values (odd or even)

Keyword Values for the :nth-last-of-type(n) Pseudo-Class
odd Selects all odd-numbered elements of the same tag type among sibling elements, counting from the end (1, 3, 5, 7, …)
even Selects all even-numbered elements of the same tag type among sibling elements, counting from the end (2, 4, 6, 8, …)
HTML 
<section>
    <p>The third 'p' tag from the last, among only the 'p' tags</p>
    <div>The third 'div' tag from the last, among only the 'div' tags</div>
    <p>The second 'p' tag from the last, among only the 'p' tags</p>
    <p>The first 'p' tag from the last, among only the 'p' tags</p>
    <div>The second 'div' tag from the last, among only the 'div' tags</div>
    <div>The first 'div' tag from the last, among only the 'div' tags</div>
</section>
CSS 
div:nth-last-of-type(even) {
    background-color: yellowgreen;
}
p:nth-last-of-type(odd) {
    background-color: orange;
}
Rendered Output

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 select the An+B-th element from the end of the list, following the custom pattern.

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

:nth-last-of-type(5n-1)
/*
 * -1 [=5×0-1], 4 [=5×1-1], 9 [=5×2-1], 14 [=5×3-1], … counting from the end.
 * Indexing starts at 1, 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 of the same tag type, counting from the end.
*/

:nth-last-of-type(5n+1)
/*
 * 1 [=5×0+1], 6 [=5×1+1], 11 [=5×2+1], 16 [=5×3+1], … counting from the end.
 * Indexing starts at 1.
 * 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 of the same tag type, counting from the end.
*/

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

As shown in this example, using the An+B formula with the :nth-last-of-type(n) pseudo-class allows you to systematically pattern and style elements of the same tag type, counting 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: 10px;
}
ol li {
    aspect-ratio: 1/0.5;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
}
ol li:nth-last-of-type(5n-1) { /* Selects elements one before multiples of 5, counting from the end */
    background-color: yellowgreen;
}
CSS aspect-ratio 속성
Rendered Output

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

Things to Keep in Mind

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

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

Consider the following example:

HTML 
<style>
    .red-item:nth-last-of-type(2) {
        color: red;
        font-weight: bold;
    }
</style>
<ol>
    <li class="red-item">Expected to match, but not selected</li>
    <li>li</li>
    <li class="red-item">li</li>
</ol>
<!--
    * Did you try to select the second '.red-item' element from the end?
    * If so, that is incorrect.
    *
    * .red-item:nth-last-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 from the end must also have the class 'red-item' to be selected.
    * => In this case, no element meets that condition.
-->
Rendered Output

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

Browser compatibility

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

Specifications

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

References

See also