:last-child CSS Pseudo Class
Description
The :last-child pseudo-class in CSS is used to target and apply styles to the last child element of its parent container. It's a powerful selector that allows you to customize the appearance of the last item within a particular group of elements, such as the last item in a list, the final paragraph in a section, or the last div in a series of divs.
Here's a brief example of how you might use the :last-child pseudo-class in CSS:
/* Select and style the last list item in an unordered list */
ul li:last-child {
font-weight: bold;
color: red;
}
/* Select and style the last paragraph in a section */
section p:last-child {
margin-bottom: 0;
}
In the first example, it selects the last
<li> element within a <ul> and makes its text bold and red. In the second example, it selects the last <p> element within a <section> and removes the bottom margin.The
:last-child pseudo-class provides a convenient way to target and modify the styling of the last element within a group without needing to assign individual classes or IDs.
Syntax
:last-child {
/* ... */
}
Example
<div>
<p>Example of the :last-child pseudo class</p>
<ul>
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
<li>Fourth and Last List Item</li>
</ul>
<p>This paragraph is also the last child element.</p>
</div>li:last-child {
color: purple;
font-weight: bold;
}
p:last-child {
color: #06bca7;
font-weight: bold;
}Browser Support
The following table will show you the current browser support for the CSS :last-child pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 1 | 1 | 9.5 | 3.1 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 2 | 1 | 37 |
Last updated by CSSPortal on: 1st October 2023