Home » CSS » CSS Last Child Example

About Fabio Cimo

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.

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>
<html>
<head>
	<title>CSS3 Image Rotate Example</title>
</head>
<body>
<!-- STYLE  SECTION -->
<style type="text/css">

</style>

<!-- HTML SECTION  -->

</body>
</html>

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  SECTION -->

<style type="text/css">

p:last-child{
	background-color: yellow;
}

</style>

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>

<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>

</div>

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

<!-- STYLE  SECTION -->

<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;
}

</style>

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  SECTION -->

<style type="text/css">

p:nth-last-child(4){
	font-family: "Calibri";
	font-weight: bold;
	font-size: 2em;
}

</style>

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

Download
You can download the full source code of this example here: CSS Last Child Selector
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
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 agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments