Definition and Usage

:last-child pseudo-class selector selects the element that is the last child of its parent.

The :last-child pseudo-class selector is the same as :nth-last-child(1).

Additional Explanation
:nth-last-child(n) is a pseudo-class that selects the element that is the nth child of its parent, counting from the end.

Basic Example

HTML 
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
CSS 
li:last-child {
    background-color: yellowgreen;
}
Rendered Output

Syntax

CSS 
:last-child {
    /* ... */
}

Examples

These examples help you understand how the :last-child pseudo-class selector works.

Styling the Last Paragraph Element

HTML 
<article>
    <h2>Heading Element</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</article>
CSS 
article p:last-child {
    background-color: yellowgreen;
}
Rendered Output

Styling Nested Elements

HTML 
<article>
    <div>This 'div' is the first one.</div>
    <div>This <span>nested 'span' is both the first and the last one.</span>!</div>
    <div>
        This <em>nested 'em' is the first one.</em>, but this <em>nested 'em' is the last one.</em>!
    </div>
    <div>This <span>nested 'span' is styled. It is both the first and the last one.</span>!</div>
    <p>This 'p' is not the last child.</p>
    <div>This 'div' is the last one.</div>
</article>
CSS 
article *:last-child {
    background-color: yellowgreen;
}
Rendered Output

Browser compatibility

Last updated: 2025-09-25

Browser Compatibility for the :last-child Pseudo-Class
Selector
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
:last-child 1 12 1 3.1
Matches elements with no parent 57 79 52 Not supported

See more details on caniuse.com.

Specifications

Specification for the :last-child Pseudo-Class
Specification
:last-child Selectors Level 4
#the-last-child-pseudo

References

See also