CSS :last-of-type疑似クラス：同名タグの兄弟要素のうち最後の要素を選択

定義と使い方

:last-of-type疑似クラスセレクターは、
特定の型（タグ名）を持つ兄弟要素の中だけを基準として、最後に配置されている要素を選択します。

特定の型とは、タグ名の型を指します。

例えば、p:last-of-typeは、同じ親要素を持つ<p>要素のみを対象として数え、その中で最後に配置されている<p>要素を選択します。

基本例

HTML

<section>
    <p>'p'タグ型としての最初の要素</p>
    <div>'div'タグ型としての最初の要素</div>
    <p>'p'タグ型としての2番目の要素</p>
    <p>'p'タグ型としての3番目の要素</p>
    <div>'div'タグ型としての2番目の要素</div>
    <div>'div'タグ型としての3番目の要素</div>
</section>

CSS

/* <section>の<p>タグ型の子要素の中から
 * <p>タグ型を基準として
 * 最後に配置されている要素
 */
section p:last-of-type {
    background-color: yellowgreen;
}

/* <section>の<div>タグ型の子要素の中から
 * <div>タグ型を基準として
 * 最後に配置されている要素
 */
section div:last-of-type {
    background-color: orange;
}

構文

例

:last-of-type疑似クラスセレクターを理解するのに役立つ例です。

最後の段落要素のスタイリング

ネストされた要素のスタイリング

HTML

<article>
    <div>この'div'は最初です。</div>
    <div>この<span>ネストされた'span'は最初であり最後です。</span>！</div>
    <div>
        この<em>ネストされた'em'は最初です。</em>しかし、<em>ネストされたこの'em'は最後です。</em>！
    </div>
    <div>この<span>ネストされた'span'はスタイルが適用されます。最初であり最後です。</span>！</div>
    <p>この'p'は最初であり最後です。</p>
    <div>この'div'は最後です。</div>
</article>

注意点

:last-of-type疑似クラスセレクターは、特定の型（タグ名）を持つ兄弟要素の中から、その型を基準として最後に配置されている要素を選択します。

特定の型とは、タグ名の型を指します。

次の例で確認してみましょう。

HTML

<style>
    .red-item:last-of-type {
        color: red;
        font-weight: bold;
    }
</style>
<ol>
    <li class="red-item">li</li>
    <li class="red-item">マッチすると期待しがちですが、実際には対象ではありません</li>
    <li>li</li>
</ol>
<!--
    * もしかして、.red-item型の中で最後の要素を選択したと思いましたか？
    * それであれば、その認識は誤りです。
    *
    * :last-of-typeは、タグ型を持つ兄弟要素の中から、最後に配置されている要素を選択します。
    *
    * .red-item:last-of-typeは、次の2つの要素に分解して考えられます。
    * => .red-item：class属性の値が'red-item'である要素であり、そのタグ名は<li>です。
    * => 特定の型とは、タグ名の型を意味します。
    * => この場合、<li>要素が特定の型になります。
    * => タグ型が<li>である兄弟要素のうち、最後の<li>要素が'red-item'というclass属性の値を持っている場合にのみ選択されます。
    * => そのため、上記の要素の中に該当する要素は存在しません。
-->