CSS Reference Pseudo-class

:last-child

:last-child is a pseudo-class which selects the target element if it is the last child of some other element.

That is, :last-child will match the element only if it is the last 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 second paragraph which, in this case, is the last child of its parent.

p:last-child {
    font-style: italic;
}
                

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>
    <ul> <!-- .. -->>
</div>
                

Trivia & Notes

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

The :last-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 :last-child</h1>
    <p>
        This is the first paragraph.
    </p>
    <p>
        This is the second paragraph, it is the last paragraph but it is not the last child of its parent. <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 last child of its parent.

span:last-child {
    color: gray;
}
                

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

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

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

p:last-child {
    font-style: italic;
}
                

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

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

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

You can see the live demo in the next section.

Browser Support

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

Written by

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

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