How to Use the CSS :last-child Pseudo-Class

Jamie Juviler
Jamie Juviler

Updated:

Published:

After dabbling in CSS for a while, you start to learn little tricks that make niche problems that much easier to solve. Case in point: CSS pseudo-classes, which allow you to target not just specific elements, but an element in a specific state.

two people using CSS last child on a computer

In this post, I’ll explain how to use the CSS pseudo-class :last-child based on how I’ve used it in my past projects. It can be a bit tricky to understand, but you might end up using it more often than you think. Let’s get started.

:last-child is useful when you want to target the last element in a group of elements (for example, list items) without using an ID selector or class selector. Let’s go through some examples to demonstrate what this means.

CSS :last-child Examples

Let’s say I have a group of paragraph elements. If I use the :last-child pseudo-class on the p selector, only the last paragraph will be changed.

See the Pen css last child - paragraphs in body, add h2 by HubSpot (@hubspot) on CodePen.

This is because these four paragraph elements are all sibling elements under their parent element body. Therefore, only the last element is affected by the CSS rule.

Another example: Here, I’ve added a div with more paragraphs inside.

See the Pen css last child - paragraphs in div by HubSpot (@hubspot) on CodePen.

We see that both paragraph 4 and paragraph 6 are green. This is because :last-child affects the last paragraph element under the body element (paragraph 4) as well as the last paragraph element under the div element (paragraph 6).

If I add another non-paragraph element after the last paragraph (I’ll use h2) this new element will not be affected by CSS because it’s not a p element. However, none of the paragraph elements will be green either.

See the Pen css last child - paragraphs in body, add h2 by HubSpot (@hubspot) on CodePen.

This is because here, :last-child only targets p elements and none of the p elements are the last child of body. So, no elements are selected by the p:last-child rule.

CSS :last-child Use Cases

How might we use :last-child in our projects practically? Here are some use cases where this pseudo-class comes in handy.

Highlight the Last Paragraph of an Article:

If you want to emphasize the last paragraph of a blog post or news article, you can use :last-child for that:

See the Pen css last child: article example by HubSpot (@hubspot) on CodePen.

 

Style the Last Item in a List

We can use :last-child with other elements besides paragraphs. Here’s an example with a list element — the final list item will be selected:

See the Pen css last child - paragraphs in body, add h2 by HubSpot (@hubspot) on CodePen.

 

Add a Border After the Last Element in a Group

You can also separate the contents of an article from any content below by adding a border below the last element, like so:

See the Pen css last child: border example by HubSpot (@hubspot) on CodePen.

 

Change the Margin After the Last Element

We can achieve a similar effect by instead increasing the margin after our last element:

See the Pen css last child: margin example by HubSpot (@hubspot) on CodePen.

 

Style the Last Row of a Table

Finally, if you want to style the final row of a table, the :last-child pseudo-class lets you do that easily.

See the Pen css last child - style table by HubSpot (@hubspot) on CodePen.

 

Styling Elements with :last-child

Now that you understand how :last-child works, you can leverage the pseudo-class instead of using extra classes or IDs to achieve the same effect, with cleaner code. Keep it in your mind, and soon enough you’ll be using it on your project.

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Launch your WordPress website with the help of this free guide and checklist.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO