Categories
Web development

CSS :last-child & :last-of-type Selectors

CSS :last-child selector

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