CSSのlast-childとlast-of-typeについての備忘録です。
【CSS】last-childとlast-of-childの違いについて
そもそも、要素が並んでいないといけない
どちらの場合でも、以下のような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; } |
これを実行すると、以下のように表示されます。
中身１
中身２
中身３
中身４
このコードを少し変えると、適用されなくなります。
例えば、外枠の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などを使うときは、並んでいるものを大きく囲ってあげることを覚えておきましょう。
last-type-ofとlast-childの違いは？
さて、もう一度戻してみると、今の状態でlast-childは機能しています。
以下のような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がlast-type-ofになっても同じように文字が赤くなります。
なのでなにが違うの？と思われるかもしれませんが、次のような場合に違いが出ます。
以下のようなHTMLコードが条件となります。
|
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はすべての子要素の最後を指すんですね。
それゆえに、中身４を赤くできませんでした。
それではここでlast-of-typeへと記述を変更しましょう。
（HTMLの関係上、クラス名をexample_content3に変更しています）
以下のようなHTMLコードが条件となります。
|
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; } |
これを実行すると、以下のように表示されます。
中身１
中身２
中身３
中身４
最後の要素です
無事赤くなりました。
last-of-typeは指定した要素の最後を指すんですね。
まとめると
- last-child：その要素の1段上の要素から見て、最後
- last-of-type：その要素の1段上のよそから見て、その要素の最後
という違いです。
その要素の最後か、それとも子要素としての最後なのかが大きな差ですね。