Definition and Usage

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

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

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

Basic Example

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

Syntax

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

Examples

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

Styling the First Heading Element

HTML 
<article>
    <h2>Heading Element</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</article>
CSS 
article h2:first-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 the first 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.</span>!</div>
    <p>This 'p' is not the first child.</p>
    <div>This 'div' is the last one.</div>
</article>
CSS 
article *:first-child {
    background-color: yellowgreen;
}
Rendered Output

Browser compatibility

Last updated: 2025-09-24

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

See more details on caniuse.com.

Specifications

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

References

See also