Introduction to CSS last-child
The:last-child selector displays every element of its parent’s last child. In simple terms, the pseudo-class:last-child CSS defines the last element in a group of sibling elements. The:last-child selector enables you directly target the last element within its defining element. This is known as a “structural pseudo-class” in the CSS Selectors Level 3 spec, indicating this is used to design content based on its parent- and sibling content relationship.
If you want the last paragraph within a container to be selected and styled, whether or not it is the last child, you can use the:last-of-kind selector, which, as the name implies, will select the last item of its type, whether or not it is its parent’s last child.
Syntax and parameters
The syntax for the CSS last-child selector can be written as shown below:
element-name :last-child {
//CSS_style_properties
}The syntax uses the below parameters:
element-name: This parameter indicates element type within its parent.
CSS_style_properties: This parameter determines CSS styles which can be applied to the last child element.
For instance, consider the below code:
<ul>
<li> This is first element </li>
<li> This is second element </li>
<li> This is third element </li>
</ul>You can apply CSS for the last child as shown below:
li:last-child {
font-size: 15px;
color: blue;
}This will apply the CSS style to the last element in the list with the font size of 15px and blue color.
How does the last-child selector work in CSS?
As with other pseudo-classes, the:last-child pseudo-class can be clustered with other selectors such as: hover, for instance, to choose the selected element with hover styles. Pseudo-elements can also be chained to::before and::after. The last child selector is often known as a Structural Pseudo class that implies it can be used based on parent and child content for styling content.
Examples of CSS last-child
Now, we will see some of the examples to describe the usage of the last-child selector in CSS.
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Last Child Selector Example </title>
<style>
p:last-child {
text-decoration: underline;
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<h2> Last Child Selector Example </h2>
<br>
<div class = "mytext">
<p> EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries. </p>
<p> Our unique step-by-step, online learning model along with amazing 2500+ courses prepared by top-notch professionals from the Industry help participants achieve their goals successfully. </p>
<p> At eduCBA, it is a matter of pride for us to make job oriented hands-on courses available to anyone, any time and anywhere. </p>
</div>
</body>
</html>Output:
In the above example, we have selected the last paragraph as the last child, and the p tag will be selected with the ‘p:last-child’ selector. The last child is selected with the red color, font-size 20px, and the underlined text displayed in the output.
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Last Child Selector Example </title>
<style>
ul li {
color: green;
}
ul li:last-child {
border: 1px dashed blue;
color: green;
font-size: 15px;
}
</style>
</head>
<body>
<h2> Last Child Selector Example </h2>
<br>
<ul>
<li> EDUCBA (Corporate Bridge Consultancy Pvt Ltd) </li>
<li> EDUCBA is a leading global provider of skill based education </li>
<li>
It addresses the needs of 500,000+ members across 40+ Countries
<ul>
<li> It is online learning model along with amazing 2500+ courses </li>
<li> It provides job oriented hands-on courses available to anyone, anytime and anywhere </li>
</ul>
</li>
</ul>
</body>
</html>Output:
In the above example, the ordered list is specified with the green color. In the first ordered list, the last sentence will have a border with dashed blue color. The same thing applies to the another ordered list which is defined in the first ordered list. This list will have a font size of 15px for the text font.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Last Child Selector Example </title>
<style>
li:last-child {
text-decoration: underline;
color: fuchsia;
}
p:last-child {
font-size: 15px;
color: red;
}
span:last-child::before {
content: "(";
color: orangered;
}
span:last-child::after {
content: ")";
color: orangered;
}
</style>
</head>
<body>
<div class="container">
<h2> Last Child Selector Example </h2>
<p>
EDUCBA (Corporate Bridge Consultancy Pvt Ltd)...
</p>
<p>
EDUCBA is a leading global provider of skill based education addressing the needs of <span>500,000+ members across 40+ Countries.</span>
</p>
</div>
<ul>
<li> It is online learning model along with amazing 2500+ courses </li>
<li> It provides job oriented hands-on courses available to anyone, any time and anywhere </li>
</ul>
</body>
</html>Output:
As shown in the example above, we were using two paragraphs and ordered a list on a page. The second paragraph defined in the container will be the last child so that it will have a font size of 15px, and the text color will be red. In this paragraph, the span tag uses the content property of CSS and can be used with: after and: before pseudo-elements. Here, it will apply orangered color to the opening bracket before starting of text, and the same color will be applied to the end of the closing bracket. The last line of the ordered list will have a fuchsia color and an underline, as shown in the image.
Example #4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Last Child Selector Example </title>
<style>
tr:last-child {
background: sandybrown;
}
</style>
</head>
<body>
<h2> Last Child Selector Example </h2>
<br>
<div class="container">
<table>
<tr>
<th> Player Name </th>
<th> Country </th>
</tr>
<tr>
<td> Virat Kohli</td>
<td> India </td>
</tr>
<tr>
<td> Ben Stokes </td>
<td> England </td>
</tr>
<tr>
<td> Jason Holder </td>
<td> West Indies </td>
</tr>
</table>
</div>
</body>
</html>Output:
In the above example, we have used the HTML table, where the last-child selector will style the tr tag. In the table, the last table row, i.e. last tr tag, will have the sandybrown as a background color, and the last-child selector will not style the remaining rows of the table.
Conclusion
So far, we have studied about CSS last-child selector along with its usage in the different scenarios. The:last-child selector was added in CSS Selectors Module 3, indicating old browser versions do not support this. Modern browser support is, however, immaculate, and new pseudo-selectors are commonly used in production processes. The:last-child selector makes it possible for us to identify an element within the parent, which is the last child element.
Recommended Articles
This is a guide to CSS, the last child. Here we discuss How does last-child selector work in CSS and Examples along with codes and outputs. You may also have a look at the following articles to learn more –
