CSS - Pseudo-class :last-of-type
The CSS pseudo-class selector :last-of-type is used to select and style the last element of its type within its parent container. This pseudo-class lets you target and apply the styles specifically to the last occurrence of a kind of element, within a given container.
:last-child vs :last-of-type
The CSS pseudo-class selector :last-child is similar to :last-of-type, but there is a difference: it is less specific. The :last-child matches only the last child of a parent element; whereas :last-of-type matches the specified elements child even if it is not the last one.
Syntax
:last-of-type {
/* ... */
}
CSS :last-of-type Example
Here is an example of :last-of-type pseudo-class, applied on <p> tag, under <div> parent element.
In this example, the CSS rules will only apply to the last <p> element found within a <div> element, leaving other <p> elements within the same container unaffected.
<html>
<head>
<style>
p:last-of-type {
color: black;
background: peachpuff;
font-weight: 600;
font-size: 1em;
font-style: italic;
padding: 5px;
}
div {
border: 2px solid black;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div>Parent element
<p>first child, so no change</p>
<p>second child, so no change</p>
<p>last child, so :last-of-type pseudo-class is applied</p>
</div>
</body>
</html>
Here is an example of :last-of-type pseudo-class, applied on <div> and <p> element.
In the example above, the last-of-type CSS rule is applied on the last item of <div> element, and also the <p> element.
<html>
<head>
<style>
#container .item:last-of-type {
color: blue;
background-color: lightpink;
font-weight: bold;
}
div,p {
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">first div, so no change.</div>
<div class="item">second div, so no change.</div>
<div class="item">
Third div, last child of the parent div, so CSS applied.
</div>
<p class="item">Last p element of its parent, selected by .container.item class selector.</p>
</div>
</body>
</html>