Updated June 12, 2023
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 to select and style the last paragraph within a container, regardless of whether it is the last child, you can use the :last-of-kind selector. As the name implies, this selector will choose the last item of its type, regardless of whether it is the last child of its parent.
Syntax
You can write the syntax for the CSS last-child selector as shown below:
element-name :last-child {
//CSS_style_properties
}The syntax uses the below parameters:
- element-name: This parameter indicates the element type within its parent.
- CSS_style_properties: This parameter determines the CSS styles we can apply 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 a 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, which implies it can be used based on parent and child content for styling content.
Examples of CSS last-child
Now, we will see some 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. We like the last child with the red color, font-size of 20px, and display the underlined text 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 other ordered list 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 used 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, we utilize the content property of CSS with the span tag, and we can use it with the pseudo-elements:after and:before. Here, it applies the orange-red color to the opening bracket before the start of the text and applies the same color to the closing bracket at the end. 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., the last tr tag, will have sandy brown as a background color, and the last-child selector will not style the remaining rows.
Conclusion
So far, we have studied CSS’s last-child selector and its usage in different scenarios. CSS Selectors Module 3 introduced the :last-child selector, which means older browser versions do not support it. However, modern browsers have excellent support, 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, the last-child element.
Recommended Articles
We hope that this EDUCBA information on “CSS last child” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
