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">中身1</p> <p class="example_content">中身2</p> <p class="example_content">中身3</p> <p class="example_content">中身4</p> </div> </div> |
1 2 3 |
.example_content:last-child{ color:red; } |
これを実行すると、以下のように表示されます。
中身1
中身2
中身3
中身4
このコードを少し変えると、適用されなくなります。
例えば、外枠のdivを外してみましょう。
1 2 3 4 5 6 |
<body> <p class="example_content">中身1</p> <p class="example_content">中身2</p> <p class="example_content">中身3</p> <p class="example_content">中身4</p> </div> |
1 2 3 |
.example_content:last-child{ color:red; } |
これを実行すると、以下のように表示されます。
中身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 5 6 7 8 |
<body> <div> <p class="example_content">中身1</p> <p class="example_content">中身2</p> <p class="example_content">中身3</p> <p class="example_content">中身4</p> </div> </div> |
1 2 3 |
.example_content:last-child{ color:red; } |
これを実行すると、以下のように表示されます。
中身1
中身2
中身3
中身4
さて、この状態ですが、last-childがlast-type-ofになっても同じように文字が赤くなります。
なのでなにが違うの?と思われるかもしれませんが、次のような場合に違いが出ます。
以下のようなHTMLコードが条件となります。
1 2 3 4 5 6 7 8 9 |
<body> <div> <p class="example_content2">中身1</p> <p class="example_content2">中身2</p> <p class="example_content2">中身3</p> <p class="example_content2">中身4</p> <h6>最後の要素</h6> </div> </div> |
1 2 3 |
.example_content2:last-child{ color:red; } |
これを実行すると、以下のように表示されます。
中身1
中身2
中身3
中身4
最後の要素です
……赤くなりませんね。
原因は最後にh6要素が入ってきたからです。
last-childはすべての子要素の最後を指すんですね。
それゆえに、中身4を赤くできませんでした。
それではここでlast-of-typeへと記述を変更しましょう。
(HTMLの関係上、クラス名をexample_content3に変更しています)
以下のようなHTMLコードが条件となります。
1 2 3 4 5 6 7 8 9 |
<body> <div> <p class="example_content3">中身1</p> <p class="example_content3">中身2</p> <p class="example_content3">中身3</p> <p class="example_content3">中身4</p> <h6>最後の要素</h6> </div> </div> |
1 2 3 |
.example_content3:last-of-type{ color:red; } |
これを実行すると、以下のように表示されます。
中身1
中身2
中身3
中身4
最後の要素です
無事赤くなりました。
last-of-typeは指定した要素の最後を指すんですね。
まとめると
- last-child:その要素の1段上の要素から見て、最後
- last-of-type:その要素の1段上のよそから見て、その要素の最後
という違いです。
その要素の最後か、それとも子要素としての最後なのかが大きな差ですね。