CSS Last Child Example

In this example we’re going to have a look at the last-child css selector.

This selector of css is used to match every element that is the last child of its parent and give attributes and properties to specifically that element.

It is compatible with all modern browsers, except versions of IE under 9.

The usage will be necessary when taking into consideration giving attributes to a specific element in a group of elements of the same (or not) type.

Let’s first see the basic application and then some cases and examples.

1. Basic Setup & Application

First, go ahead and create a blank html document and then add the basic syntax inside like so:

<!DOCTYPE html>
	<title>CSS3 Image Rotate Example</title>
<style type="text/css">


<!-- HTML SECTION  -->


Now to apply the last-child selector, first add some elements like below:

<!-- HTML SECTION  -->

<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>
<p>This is the fourth paragraph</p>
<p>This is the fifth paragraph</p>

Now the most basic application would be: tag:last-child or class:last-child like below:


<style type="text/css">

	background-color: yellow;


In the browser, you can see the last line out of five having a yellow background color:

Last-Child Selector Basic Application
Last-Child Selector Basic Application

2. Cases and Examples

Another case would be when you change a text styling or boxes with text inside. Look at the html below:

<!-- HTML SECTION  -->

<div class="parent">
	<div>This will be a default size font</div>
	<div>Also this is going to be default text</div>
	<div>Random Text 3</div>

<div class="boxes">
	<div class="box">I am box 1</div>
	<div class="box">I am box 2</div>
	<div class="box">I am box 3</div>


And applying the css for last-childs we’d get:


<style type="text/css">

.parent div:last-child{
	font-family: "Montserrat";
	font-size: 2em;
	width: 10em;
	height: 5em;
	color: red;

.box {
	width: 8em;
	height: 5em;
	border: 0.2em solid #ccc;
	margin-bottom: 1em;

.boxes .box:last-child {
	background-color: yellow;
	text-align: center;
	font-size: 2em;
	font-family: "Lato";
	padding-top: 3em;


In this case, the view of these ‘last children’ would be:

Example of Last Child Application
Example of Last Child Application

Another usage of it can be noticed when also using the nth-last-child(n) like below:

<!-- HTML SECTION  -->

<p>First line here</p>
<p>Second line here</p>
<p>Third line here</p>
<p>Fourth line here</p>
<p>Fifth line here</p>

Applying the fourth child element means selecting the second, because the counting starts from the last element:


<style type="text/css">

	font-family: "Calibri";
	font-weight: bold;
	font-size: 2em;


As you’d expect, the second line has different attributes applied:

Nth-Last-Child Application
Nth-Last-Child Application

3. Conclusion

To conclude, the last-child css selector is good for targeting only the last element of a parent element.

However, if you want to select more than one element and counting from the bottom up, consider using nth-last-child.

It is up to you to decide if you need the first-child or last-child selector according to your needs.

4. Download

You can download the full source code of this example here: CSS Last Child Selector

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!


1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook


and many more ....


I have read and agree to the terms & conditions


Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments
Back to top button