: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
Edge Chrome Firefox Opera Safari
12119.53.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.12137

Last updated by CSSPortal on: 1st October 2023