【CSS】last-childとlast-of-typeの違いについて

  • 2022年9月1日
  • 2023年5月11日
  • css
css NO IMAGE

CSSのlast-childとlast-of-typeの違いについてのまとめました。
似ている2つのセレクタ、その違いをしっかりと理解していきましょう。

【CSS】last-childとlast-of-typeの違いについて

並んでいる要素に要注意!

分かりやすいように、以下のようなHTML、CSSコードを考えましょう。

これを実行すると、以下のように表示されます。

実際の見え方

中身1

中身2

中身3

中身4

このコードならば、CSSファイルのlast-childセレクタがlast-of-typeセレクタになっても同じように文字が赤くなります。
それじゃあなにが違うの?と思われるかもしれませんが、次のような場合に違いが出ます。

これを実行すると、以下のように表示されます。

実際の見え方

中身1

中身2

中身3

中身4

最後の要素です

赤くなりませんね。
原因は最後にh6要素が入ってきたからです。

last-childはすべての子要素の最後を指しますが、今回の最後の要素はh6でexample_content2がクラスに指定されていないために赤くなりません。

最後の要素はlast-of-typeで解決!

それではここでlast-childセレクタをlast-of-typeセレクタへと記述を変更しましょう。
(記事の中で正確に表示するために、ここではクラス名をexample_content3に変更しています)

これを実行すると、以下のように表示されます。

実際の見え方

中身1

中身2

中身3

中身4

最後の要素です

無事に「中身4」が赤くなりました。
last-of-typeは指定した要素の最後を指すんですね。

まとめると

  • last-child:その要素の1段上の要素から見て、最後
  • last-of-type:その要素の1段上のよそから見て、その要素の最後

という違いです。
その要素の最後か、それとも子要素としての最後なのかが大きな差ですね。

last-childやlast-of-typeが効かない場合は?

どちらのセレクタでも、効かない場合は親要素が原因かもしれません。
以下のようなHTMLコードが前提となります。

これを実行すると、以下のように表示されます。

実際の見え方

中身1

中身2

中身3

中身4

last-childセレクタが適用されて、最後の「中身4」が赤くなっていますね。

ところがこのコードを少し変えると、適用されなくなります。
例えば、外枠のdivを外してみましょう。

これを実行すると、以下のように表示されます。

実際の見え方

中身1

中身2

中身3

中身4

divをなくすことで、「中身1」~「中身4」をまとめていたものが無くなりました。
それゆえにlast-childが効かなくなっています。これはlast-type-ofでも同様です。

last-childなどを使うときは、並んでいるものを大きく囲ってあげることを覚えておきましょう。