:last-child
The CSS :last-child selector matches every element that is the last in its containing element (parent).
Syntax:
:last-child {
CSS declarations;
} Example:
<!DOCTYPE html>
<html>
<head>
<style>
.parent :last-child {
color: #2a9d8f;
font-weight: bold;
}
</style>
</head>
<body>
<div class="parent">
<h4>This is a heading.</h4>
<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>
</div>
</body>
</html>Output:
This is a heading.
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
This is the fourth paragraph.
:last-of-type
The CSS :last-of-type selector allows you to match the last child of an element within its container (parent).
Syntax:
:last-of-type {
CSS declarations;
} Example:
<!DOCTYPE html>
<html>
<head>
<style>
.parent :last-of-type {
color: #2a9d8f;
font-weight: bold;
}
</style>
</head>
<body>
<div class="parent">
<h4>This is a heading.</h4>
<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>
</div>
</body>
</html>Output:
This is a heading.
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
This is the fourth paragraph.
Note: The CSS :last-child selector only works when the element in question is the last child of the container (parent), not the last of a specific type of element. The CSS :last-of-type selector matches every element that is the last child, of a particular type, of its container (parent).
Enjoy coding!