CSS :nth-last-of-type(n) Pseudo-class

CSS :nth-last-of-type(n)

The CSS :nth-last-of-type(n) pseudo-class matches elements based on their position among sibling elements of the same type, counting from the end. It allows you to style elements dynamically based on their reverse order within the same type.

The syntax for the :nth-last-of-type(n) pseudo-class is:

</>

Copy

selector:nth-last-of-type(n) {
    property: value;
}

Where:

Parameter	Description
`selector`	The element type to which the `:nth-last-of-type` pseudo-class will apply.
`n`	A number, keyword, or formula specifying which elements to target (e.g., `2`, `odd`, `2n`).
`property`	The CSS property to style the element.
`value`	The value assigned to the CSS property.

Common patterns for n include:

Pattern	Description
`2`	Targets the second-to-last element of the specified type.
`odd`	Targets odd-numbered elements of the specified type, counting from the end.
`even`	Targets even-numbered elements of the specified type, counting from the end.
`2n`	Targets every second element of the specified type, counting from the end.
`2n+1`	Targets odd-numbered elements from the end (same as `odd`).

Examples

1. Styling the Second-to-Last Paragraph

In this example, the second-to-last <p> element in a container is styled with blue text color.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:nth-last-of-type(2) {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>First paragraph.</p>
        <p>Second-to-last paragraph.</p>
        <p>Last paragraph.</p>
    </div>
</body>
</html>

2. Highlighting Odd List Items (From the End)

Here, odd-numbered <li> elements in an unordered list are styled with a bold font, counting from the end.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        li:nth-last-of-type(odd) {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
</html>

3. Styling the Last Three Table Rows

The last three <tr> elements in a table are styled with a yellow background.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        tr:nth-last-of-type(-n+3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr><td>Row 1</td></tr>
        <tr><td>Row 2</td></tr>
        <tr><td>Row 3</td></tr>
        <tr><td>Row 4</td>
    </table>
</body>
</html>

4. Styling Every Second Heading (From the End)

Every second <h2> element, counting from the end, is styled with green text color.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h2:nth-last-of-type(2n) {
            color: green;
        }
    </style>
</head>
<body>
    <div>
        <h2>Heading 1</h2>
        <h2>Heading 2</h2>
        <h2>Heading 3</h2>
        <h2>Heading 4</h2>
    </div>
</body>
</html>

5. Styling Every Second Image (From the End)

Every second <img> element, counting from the end, is styled with a red border.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        img:nth-last-of-type(2n) {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div>
        <img src="image1.jpg" alt="Image 1" width="100">
        <img src="image2.jpg" alt="Image 2" width="100">
        <img src="image3.jpg" alt="Image 3" width="100">
        <img src="image4.jpg" alt="Image 4" width="100">
    </div>
</body>
</html>

TutorialKart

CSS :nth-last-of-type(n) Pseudo-class