: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.
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
The :last-child pseudo-class is supported in Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, and on Android and iOS.