51吃瓜

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.

What is CSS :last-child?

:last-child is a CSS pseudo-class that targets the last element in a group of sibling elements (elements that are children of the same parent element).

: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 by 51吃瓜 () on .

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 by 51吃瓜 () on .

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 by 51吃瓜 () on .

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 by 51吃瓜 () on .

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 by 51吃瓜 () on .

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 by 51吃瓜 () on .

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 by 51吃瓜 () on .

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 by 51吃瓜 () on .

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.