How to Select the Last Element of a Specific Type
Solution with CSS
The CSS :last-of-type pseudo-class will help us to select the last child element of its type div, span, p, article, etc among a group of its siblings (direct child of its parent)
It may seem a little bit confusing at first, but with the examples below you will understand it completely once and for all!
Let's start with a simple example and extend it step by step to understand this concept well :
<!DOCTYPE html>
<html>
<head>
<title>last-of-type pseudo class</title>
</head>
<body>
<style>
main :last-of-type {
background-color: aqua;
}
</style>
<main>
<div>I'm the first div inside the main!</div>
<div>Hi, this is the second div here!</div>
<p>I'm a p tag which is alone here! But hey, look at my color!</p>
<div>I'm the last div here, look at my color!</div>
</main>
</body>
</html>In the code above, we have a main tag as our parent for div & p tags. We specified in the css that we want our last direct children of main tag (our parent in here) to have a background color of aqua ( main :last-of-type { background-color: aqua; })
Note the space between main and :last-of-type.
So the last div and the only p inside the main tag will be aqua color.
Here's the result so far:
<!DOCTYPE html>
<html>
<head>
<title>last-of-type pseudo class</title>
</head>
<body>
<style>
main :last-of-type {
background-color: aqua;
}
</style>
<main class="example-wrapper">
<div>I'm the first div inside the main tag!</div>
<div>Hi, this is the second div here!</div>
<p>I'm a p tag which is alone here! But hey, look at my color</p>
<div>I'm the last div here, look at my color!</div>
</main>
</body>
</html>Now, let's extend it a little bit by adding other tags in between our existing tags. Here we go:
<style>
main :last-of-type {
background-color: aqua;
}
</style>
<main>
<div>
I'm the first div inside the main! <span>I'm a span here</span> And
<span>I'm the other span in here!</span>
</div>
<div>Hi, this is the second div here! Now I have a <span>span</span> too.</div>
<p>I'm a <u>paragraph</u> tag here! And I'm an <em>em</em> tag in p!</p>
<p>Now I'm the last p!</p>
<div>I'm the last div here, look at my color! But hey, I think I'm not the last now! There's a div next after me!</div>
<div>Now I'm the last div!</div>
</main>So as you saw, we added some span, em, and p tags inside of direct children of the main tag.
Now, the tags inside of each direct child will be treated as a last type of element.
Meaning that for example in the first div, we added two span tags, and the last one will be selected as the last of type span in its direct parent which is the first div, and that div itself will be treated as a type of div related to its direct parent, which is the main tag.
Now you'll have a good grasp of using the :last-of-type pseudo class.
Here's the final result:
I'm a paragraph tag here! And I'm an em tag in p!
Now I'm the last p!