CSS Reference Pseudo-class

:first-child

:first-child is a pseudo-class which selects the target element if it is the first child of some other element. That is, :first-child will match the element only if it is the first child of its parent.

For example, suppose you have the following HTML:

<article>
    <p>
        Lorem Ipsum...
        </p>
    <p>
        Another Lorem Ipsum...
    </p>
</article>
                

The following will select and apply the styles to the first paragraph which, in this case, is the first child of its parent.

p:first-child {
    font-size: 1.5em;
}
                

The above rule will not style the paragraph in the following example, because it is not the first child of its .container parent.

<div class="container">
    <h1>Heading</h1>
    <p>
        Lorem Ipsum...
    </p>
</div>
                

Trivia & Notes

If you want to select and style the first paragraph inside a container, whether or not it is the first child, you can use the :first-of-type selector, which, as the name suggests, will select the first element of its type, whether or not it is the first child of its parent. For example, p:first-of-type will select the paragraph that comes after the heading in the above source code example, but will not match any other paragraph that comes after that.

The :first-child pseudo-class, just like other pseudo-classes, can be chained with other selectors such as :hover, for example, to provide hover styles for selected element. It can also be chained with pseudo-elements ::before and ::after. See the examples and live demo sections below for examples.

Examples

Suppose you have the following markup:

<article>
    <h1>Understanding :first-child</h1>
    <p>
        This is the first paragraph, but it's not the first child of its parent.
    </p>
    <p>
        This is another paragraph. <span>This is a span inside the paragraph.</span>
    </p>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
    </ul>
</article>
                

The following rule will match the span inside the second paragraph, because it is the first child of its parent.

span:first-child {
    color: grey;
}
                

The following rule will match the first list item in the above unordered list.

li:first-child {
    text-decoration: underline;
    color: deepPink;
}
                

The following rule will not match any of the above paragraphs, because none of them is a first child of its parent.

p:first-child {
    font-size: 1.5em;
}
                

The following rule will wrap the span in two parenthesis using the ::before and ::after pseudo-elements.

span:first-child::before {
    content: "(";
    color: deepPink;
}

span:first-child::after {
    content: ")";
    color: deepPink;
}
                

You can see the live demo in the next section.

Browser Support

The :first-child pseudo-class is supported in Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 7+, and on Android and iOS.

Notes

Internet Explorer 7 doesn’t update the styles when elements are added dynamically. In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn’t applied until the link loses focus.

Further Reading

Written by

Last updated February 3, 2015 at 12:34 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.