【CSSセレクタ】E:last-of-type

style.css

/* div要素の中の最後のp要素を赤字にする */
div p:last-of-type { color: red;}

/* ul内の最後のli要素のボーダーを消す */
ul li:last-of-type { border-bottom: none;}

/* セクション内の最後の見出しにマージン下を追加 */
section h2:last-of-type { margin-bottom: 32px;}

/* テーブルの最後のth列のスタイルを変える */
tr th:last-of-type { text-align: right;}

div p:last-of-type { color: red;} /* div要素の中の最後のp要素を赤字にします。 */

<div>
	<p>ここはp要素です。</p>
	<div>ここはdiv要素です。</div>
	<p>ここはp要素です。</p>
	<div>ここはdiv要素です。</div>
</div>

注意点としてid名やクラス名、属性などからの特定と『:last-of-type』を併用した場合、まず要素名からの特定を行った後になおかつ指定されたid名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:last-of-type』と指定した場合、子要素のうちの最後のp要素が『hoge』というクラス名を持っていた場合に限りデザインが当たります。子要素のうちの最後の『hoge』というクラス名を持つp要素、といった特定方法ではありませんのでご注意ください。

div p.hoge:last-of-type { color: red;} /* div要素の子要素の最後のp要素が『hoge』というクラス名を持っていた場合に赤字にします。 */

<div>
	<p class="hoge">ここはdiv要素の中の最初の『hoge』というクラス名を持つp要素です。</p>
	<p class="hoge">ここはdiv要素の中の最後の『hoge』というクラス名を持つp要素です。</p>
</div>
<div>
	<p>ここはdiv要素の中の最初のp要素です。</p>
	<p class="hoge">ここはdiv要素の中の『hoge』というクラス名を持つp要素です。</p>
	<p class="hoge">ここはdiv要素の中の『hoge』というクラス名を持つp要素です。</p>
	<p>ここはdiv要素の中の最後のp要素です。</p>
</div>

全ての最後の子要素を指定したい場合は『*:last-of-type』もしくは『:last-of-type』と指定します。この場合は子要素として存在している全ての要素名ごとにカウントした最後の要素に対して適用されます。例えば子要素にp要素、span要素が存在した場合は最後のp要素と最後のspan要素にそれぞれデザインが当たります。

div :last-of-type { color: red;} /* 子要素の要素名ごとにカウントした最後の子要素を赤字にします。 */

<div>
	<div>ここはdiv要素です。</div>
	<p>ここはp要素です。</p>
	<div>ここはdiv要素です。</div>
	<p>ここはp要素です。</p>
</div>

※ バージョン情報は MDN に基づいています。