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.
first published on http://www.js-craft.io/blog/the-last-child-vs-last-of-type-selector-in-css/
Top comments (0)