:last-of-type is a pseudo-class selector that selects an element that is the last element (sibling) of its type in the list of children of its parent.
In other words, :last-of-type matches the last occurrence of an element inside its parent. For example, the following rule will select and style the last paragraph in .container.
<article>
<h1>Article Title</h1>
<p>
First paragraph.
</p>
<p>
Second paragraph.
</p>
<footer> <-- .. --></footer>
</article>
p:last-of-type {
font-style: italic;
}
Trivia & Notes
:last-of-type is similar to the :last-child selector, except that it is more specific than the latter—:last-of-type will select the last paragraph in the above example whether or not it is the last child of the article; :last-child, on the other hand, is used to select the element only if it is the last child of its parent. So, this:
p:last-child {
font-style: italic;
}
will not style the last paragraph above because it is not the last child of its parent. You can read more about the :last-child selector in its entry.
The :last-of-type pseudo-class, just like other pseudo-classes, can be chained with other selectors such as :hover, for example, to provide hover styles for selected element. It can also be chained with pseudo-elements ::before and ::after. See the examples and live demo sections below for examples.
Examples
Suppose you have the following markup:
<div class="container">
<h1>Title</h1>
<nav>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
</nav>
<article>
<h2>Title</h2>
<p>
Lorem Ipsum... <a href="#">Link</a>... <a href="#">another Link</a>
</p>
<p>
Lorem Ipsum...
</p>
</article>
<article>
<h2>Title</h2>
<p>
Lorem Ipsum...
</p>
<p>
Lorem Ipsum
</p>
</article>
</div>
The following rule will select the last article in the above .container:
article:last-of-type {
background-color: #eee;
border: 1px solid #ddd;
}
The following rule will select the last occurrence of a paragraph in its parent’s list of children:
p:last-of-type {
font-weight: bold;
}
The following rule will select the last occurrence of a link inside its parent and use pseudo-elements to print the href of that link, wrapped in parenthesis, right after it:
a:last-of-type {
color: deepPink;
}
a:last-of-type::after {
content: "(" attr(href) ")";
color: deepPink;
}
You can see a live demo of this example in the next section.
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
The :last-of-type pseudo-class is supported in Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, and on Android and iOS.
