【CSS】last-childとlast-of-childの違いについて【備忘録】

css NO IMAGE

CSSのlast-childとlast-of-typeについての備忘録です。

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

そもそも、要素が並んでいないといけない

どちらの場合でも、以下のようなHTMLコードが条件となります。

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

実際の見え方

中身1

中身2

中身3

中身4

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

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

実際の見え方

中身1

中身2

中身3

中身4

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

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

last-type-ofとlast-childの違いは?

さて、もう一度戻してみると、今の状態でlast-childは機能しています。

以下のようなHTMLコードが条件となります。

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

実際の見え方

中身1

中身2

中身3

中身4

さて、この状態ですが、last-childがlast-type-ofになっても同じように文字が赤くなります。
なのでなにが違うの?と思われるかもしれませんが、次のような場合に違いが出ます。

以下のようなHTMLコードが条件となります。

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

実際の見え方

中身1

中身2

中身3

中身4

最後の要素です

……赤くなりませんね。
原因は最後にh6要素が入ってきたからです。
last-childはすべての子要素の最後を指すんですね。
それゆえに、中身4を赤くできませんでした。

last-of-typeで解決!

それではここでlast-of-typeへと記述を変更しましょう。
(HTMLの関係上、クラス名をexample_content3に変更しています)

以下のようなHTMLコードが条件となります。

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

実際の見え方

中身1

中身2

中身3

中身4

最後の要素です

無事赤くなりました。
last-of-typeは指定した要素の最後を指すんですね。

まとめると

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

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