CSS Last Child Selector – The Most Valuable Selector

Marilena

By Marilena

8 min read
Bookmark this post

Hello everyone! In this post, we will explore the CSS last child selector, one of the most useful selectors in CSS. We use the CSS last-child selector when we want to target and modify only the last element of the same type. By types of elements, we mean HTML tags like paragraphs (<p>), headings (<h1>, <h2> …), lists (<li>), and others.

Typically, we use the CSS last-child selector with list items <li>, but it can be applied to any type of element. I have prepared some examples to help you understand how to use the selector based on your needs.

How to use the CSS last child selector for list elements

In the example below, the HTML structure includes an ordered list (<ol>) with three list items (<li>), all colored indigo.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Last item</li>
</ol>
HTML
An ordered list with three items all colored indigo.

We continue by adding the CSS rule, which selects only the last item and applies a red color to it.

/* Applies indigo color to all list items */
li {
  color: indigo; 
}


/* Applies red color only to the last list item */
li:last-child {
  color: red; 
}


/*       OR       */

li:nth-last-child(1) {
  color: red;
}
CSS
An ordered list with three items all colored indigo apart from the last one which has color red as we used the: CSS last child selector. :last-child OR :nth-last-child(1)

When using the :last-child selector in CSS, it targets the last element within its parent. When we add a new item to the end of the list, this new item becomes the last child of the list, and the previous first item now becomes the second one from the end. This change causes the :last-child selector to now target the newly added item instead.

Applying the CSS last child selector to non-list elements

In the following example, we will use the last child selector for paragraphs. The HTML structure contains a <div> which enclose three paragraph (<p>) elements. By default, all HTML elements have black text color, so paragraphs will appear in black.

<div>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Last paragraph</p>
</div>
HTML
Three paragraphs all colored by default black.

By setting the CSS last child selector, it selects the last <p> element and applies the text color red to a white background. As a result, the last paragraph appears in red with a white background, while the subsequent paragraphs keep their default styling.

/* Applies red color and background white
   to the last paragraph
*/
p:last-child {
  color: red;
  background-color: white;
}

/*       OR       */

p:nth-last-child(1) {
  color: red;
  background: white;
}
CSS
Three paragraphs all colored by default black, apart from the last one which has color red and background color white as we used the last child css selector.

Using the last child selector across multiple parent containers

In this example, we will examine another case, as many times, we have multiple HTML elements to work with within a document. Here, we have two div elements, each containing two paragraph (<p>) elements colored black.

<div>
  <p>First paragraph inside the first div</p>
  <p>Last paragraph inside the first div</p>
</div>
<div>
  <p>First paragraph inside the second div</p>
  <p>Last paragraph inside the second div</p>
</div>
HTML
Four paragraphs all colored black

The CSS rule div p:last-child selects the last <p> element within any <div> and applies the specified styles to it.

/* Applies red color and white background
   to the last paragraph inside each div
*/
div p:last-child {
  color: red;
  background-color: white;
}

/*       OR       */

div p:nth-last-child(1) {
  color: red;
  background-color: white;
}
CSS

As a result, the last paragraph of each <div> will display in red with a white background.

Meanwhile, the remaining paragraphs will keep their default styles. This demonstrates how the :last-child selector can be used to style the last element within several parent containers. 😉

Selecting the last child inside the first parent element

In this example, we have two <div> elements, each containing two paragraph <p> elements colored black as in the previous one, but this time, we will examine how we can select only the last paragraph inside the first div.

<div>
  <p>First paragraph in the first div</p>
  <p>Second paragraph in the first div</p>
</div>
<div>
  <p>First paragraph in the second div</p>
  <p>Second paragraph in the second div</p>
</div>
HTML
Four paragraphs all colored black

The CSS rule div:first-child p:last-child selects only the first paragraph <p> within the first div and applies the specified styles to it.

/* Applies red color and white background
   to the last paragraph of the first div
*/

div:first-child p:last-child {
  color: red;
  background-color: white;
}

/*       OR       */

div:nth-child(1) p:nth-last-child(1) {
  color: red;
  background-color: white;
}                    
CSS

Therefore, the last paragraph in the first div will be shown in red with a white background, while the second paragraph will remain in its default black color.

The second div, is not influenced at all by the styles applied to the first div, demonstrating selective styling implementation. 😉 This method is particularly useful for assigning specific styles to elements in complex layouts.

Avoiding the last child with the :not(:last-child) selector

Finally, we will examine the opposite case and how to avoid selecting the last child element. In this example, the HTML structure consists of an ordered list <ol> housing three list <li> elements.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Last item</li>
</ol>
HTML
An ordered list with three items all colored by default, black.

The CSS rule ol li:not(:last-child) selects all <li> elements within the ol apart from the last one and apply the specified styles to them.

/* Applies red color to all paragraphs
   except for the last one
*/

ol li:not(:last-child) {
  color: red;
}
CSS

As a result, all list items except for the last one will be pictured in red, while the last list item will retain its default color, black.

An ordered list with three items. The last item has by default color black while the other two items have color red as we used the css  not last child selector.

Alternatively, we can use the CSS nth-last-child selector like this

ol li:not(:nth-last-child(1)) {
  color: red;
}
CSS

This selector serves a similar purpose, but it is more flexible as it allows for the selection of any child based on its position.

🌼 Hope you found my post interesting and helpful. Thanks for being here! 🌼

DigitalOcean Referral Badge
guest
0 Comments
Inline Feedbacks
View all comments

Continue reading

Front, Programming

Make a Unique Folded Corner Effect – Step By Step Guide

Front, Programming

Keyframes in CSS Explained – Make Your Animations Stand Out

Back, Programming

How To Use Absolute Paths In A Node Project (2024)

Programming

Javascript Array Methods – Easy Examples That Make Learning A Blast

Front, Programming

How To Make CSS Reflection – The Easy Way

Front, Programming

The Unique CSS Opacity – Check Out This Amazing Property

Front, Programming

Contrast And Brightness: Empower CSS Filter For Powerful Images

Front, Programming

Opacity And Saturate: Empower CSS Filter For Unique Images

Front, Programming

What Does span Do in HTML? Unlocking Its Full Potential

Front, Programming

Most Useful HTML Elements for Maximizing Better Results

Front, Programming

HTML Formatting Elements Made Simple: With Easy And Practical Examples

Front, Programming

HTML Lists Made Easy: Ordered, Unordered, and Special Lists

Subscribe to our newsletter

Dive into the Fun Side of Tech! Posts, News, and More Delivered to Your Inbox!

Intuit Mailchimp