CSS :nth-last-child(n) Pseudo-class

CSS :nth-last-child(n)

The CSS :nth-last-child(n) pseudo-class matches elements based on their position within their parent, counting from the end. It allows you to style elements dynamically based on their reverse index.

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

</>

Copy

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

Where:

Parameter	Description
`selector`	The element you want to target.
`n`	A number, keyword, or formula specifying the position from the end (e.g., `2`, `odd`, `2n`).
`property`	The CSS property to apply.
`value`	The value assigned to the CSS property.

Common patterns for n include:

Pattern	Description
`2`	Targets the second-to-last child.
`odd`	Targets odd-numbered children, counting from the end (e.g., 1st, 3rd, 5th from the end).
`even`	Targets even-numbered children, counting from the end (e.g., 2nd, 4th, 6th from the end).
`2n`	Targets every second child, counting from the end.
`2n+1`	Targets odd-numbered children from the end (same as `odd`).

Examples

1. Styling the Second-to-Last List Item

In this example, the second-to-last <li> in an unordered list is styled with a red text color.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        li:nth-last-child(2) {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
</html>

2. Highlighting Odd Table Rows (From the End)

Here, odd-numbered rows, counting from the end of the table, are given a lightblue background.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        tr:nth-last-child(odd) {
            background-color: lightblue;
        }
    </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></tr>
    </table>
</body>
</html>

3. Styling the Last Div in a Container

The last <div> in a container is styled with a yellow background.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div:nth-last-child(1) {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Last Div</div>
</body>
</html>

4. Styling Every Second-to-Last Paragraph

Every second-to-last <p> element in a container is styled with italic text.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:nth-last-child(2n) {
            font-style: italic;
        }
    </style>
</head>
<body>
    <div>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
        <p>Paragraph 4</p>
    </div>
</body>
</html>

5. Targeting the Last 3 Elements in a List

In this example, the last three <li> elements in a list are styled with bold text.

index.html

</>

Copy

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

TutorialKart

CSS :nth-last-child(n) Pseudo-class