The last-child vs last-of-type selector in CSS

DanielJune 3, 2021

Let's say we have the following HTML:

<div>
    <h1>First h1</h1>
    <h1>Second h1</h1>
    <p>First paragraph</p>
    <p>Second paragraph</p>
</div>

If we want to target the last child of the div we will use:

div :last-child {
  color: red;
}
/*note the white space between div and :last-child*/

While if we want to target the last child of the div only if that child is a p element then we will have:

div p:last-child {
  color: red;
}

On the other side, last-of-type will target the last occurrence of that type of element. So, let's say we want to target the last occurrence of an h1 element in a div:

div h1:last-of-type {
  color: blue;
}

The last-of-type does not need to be the last child.

There are also many complementary alternatives for these selectors like : :first-of-type, :nth-last-of-type, first-child etc.

As usual Chris, from CSS Tricks, has a great article about this.

Below is a small example:

See the Pen
last-of-type vs last-child by JS Craft (@js-craft)
on CodePen.