CSSのlast-childとlast-of-typeの違いについてのまとめました。
似ている2つのセレクタ、その違いをしっかりと理解していきましょう。
【CSS】last-childとlast-of-typeの違いについて
並んでいる要素に要注意！
分かりやすいように、以下のようなHTML、CSSコードを考えましょう。
|
1 2 3 4 5 6 7 8 |
<body> <div> <p class="example_content">中身１</p> <p class="example_content">中身２</p> <p class="example_content">中身３</p> <p class="example_content">中身４</p> </div> </div> |
|
1 2 3 |
.example_content:last-child{ color:red; } |
これを実行すると、以下のように表示されます。
中身１
中身２
中身３
中身４
このコードならば、CSSファイルのlast-childセレクタがlast-of-typeセレクタになっても同じように文字が赤くなります。
それじゃあなにが違うの？と思われるかもしれませんが、次のような場合に違いが出ます。
|
1 2 3 4 5 6 7 8 9 |
<body> <div> <p class="example_content2">中身１</p> <p class="example_content2">中身２</p> <p class="example_content2">中身３</p> <p class="example_content2">中身４</p> <h6>最後の要素</h6> </div> </div> |
|
1 2 3 |
.example_content2:last-child{ color:red; } |
これを実行すると、以下のように表示されます。
中身１
中身２
中身３
中身４
最後の要素です
赤くなりませんね。
原因は最後にh6要素が入ってきたからです。
last-childはすべての子要素の最後を指しますが、今回の最後の要素はh6でexample_content2がクラスに指定されていないために赤くなりません。
最後の要素はlast-of-typeで解決！
それではここでlast-childセレクタをlast-of-typeセレクタへと記述を変更しましょう。
（記事の中で正確に表示するために、ここではクラス名をexample_content3に変更しています）
|
1 2 3 4 5 6 7 8 9 |
<body> <div> <p class="example_content3">中身１</p> <p class="example_content3">中身２</p> <p class="example_content3">中身３</p> <p class="example_content3">中身４</p> <h6>最後の要素</h6> </div> </div> |
|
1 2 3 |
.example_content3:last-of-type{ color:red; } |
これを実行すると、以下のように表示されます。
中身１
中身２
中身３
中身４
最後の要素です
無事に「中身4」が赤くなりました。
last-of-typeは指定した要素の最後を指すんですね。
まとめると
- last-child：その要素の1段上の要素から見て、最後
- last-of-type：その要素の1段上のよそから見て、その要素の最後
という違いです。
その要素の最後か、それとも子要素としての最後なのかが大きな差ですね。
last-childやlast-of-typeが効かない場合は？
どちらのセレクタでも、効かない場合は親要素が原因かもしれません。
以下のようなHTMLコードが前提となります。
|
1 2 3 4 5 6 7 8 |
<body> <div> <p class="example_content">中身１</p> <p class="example_content">中身２</p> <p class="example_content">中身３</p> <p class="example_content">中身４</p> </div> </div> |
|
1 2 3 |
.example_content:last-child{ color:red; } |
これを実行すると、以下のように表示されます。
中身１
中身２
中身３
中身４
last-childセレクタが適用されて、最後の「中身４」が赤くなっていますね。
ところがこのコードを少し変えると、適用されなくなります。
例えば、外枠のdivを外してみましょう。
|
1 2 3 4 5 6 |
<body> <p class="example_content">中身１</p> <p class="example_content">中身２</p> <p class="example_content">中身３</p> <p class="example_content">中身４</p> </div> |
|
1 2 3 |
.example_content:last-child{ color:red; } |
これを実行すると、以下のように表示されます。
中身１
中身２
中身３
中身４
divをなくすことで、「中身１」～「中身４」をまとめていたものが無くなりました。
それゆえにlast-childが効かなくなっています。これはlast-type-ofでも同様です。
last-childなどを使うときは、並んでいるものを大きく囲ってあげることを覚えておきましょう。