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

Written by: Jamie Juviler
Guidebook titled

FREE GUIDE TO WORDPRESS WEBSITES

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

Download the Free Checklist
two people using CSS last child on a computer

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.

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.

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.

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.

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:

 

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:

 

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:

 

Change the Margin After the Last Element

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

 

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.

 

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

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