[CSS Selector] E:last-of-type

style.css

/* make the last p element inside a div red */
div p:last-of-type { color: red;}

/* remove the border from the last li in a ul */
ul li:last-of-type { border-bottom: none;}

/* add extra margin below the last h2 in a section */
section h2:last-of-type { margin-bottom: 32px;}

/* right-align the last th column */
tr th:last-of-type { text-align: right;}

div p:last-of-type { color: red;} /* Makes the last p element inside a div red. */

<div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
</div>

Note that when combining id, class, or attribute selectors with ':last-of-type', it first identifies the last child of each element type, then checks whether it also matches the specified id, class, or attribute. For example, 'p.hoge:last-of-type' applies only if the last p element has class 'hoge'. It does not mean "the last p element with class 'hoge'".

div p.hoge:last-of-type { color: red;} /* Applies in red if the last p element inside a div has class 'hoge'. */

<div>
	<p class="hoge">This is the first p with class 'hoge' inside the div.</p>
	<p class="hoge">This is the last p with class 'hoge' inside the div.</p>
</div>
<div>
	<p>This is the first p element inside the div.</p>
	<p class="hoge">This is a p with class 'hoge' inside the div.</p>
	<p class="hoge">This is a p with class 'hoge' inside the div.</p>
	<p>This is the last p element inside the div.</p>
</div>

To target the last child of every element type, use '*:last-of-type' or just ':last-of-type'. This applies to the last element of each tag type among siblings. For example, if p and span elements both exist as children, it applies to the last p and the last span separately.

div :last-of-type { color: red;} /* Makes the last child of each element type red. */

<div>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
</div>

※ Version data is based on MDN.