last-child と last-of-type の違い | Proglad

2020/03/02

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

last-child と last-of-type の違いがわかりにくい
かつ、すぐ忘れるのでメモ

p:last-child 「最後の子要素がpタグの場合に適用」
p:last-of-type 「子要素の中の最後のpタグに対して適用」

See the Pen last-child と last-of-type の違い by takapen (@takapen) on CodePen.


    aaa
    bbb
    ccc
    ddd





    aaa
    bbb
    ccc
    ddd

/* 最後の子要素がp要素だった場合、なので*/
/* 適用される */
.sample1 p:last-child {
  color: #c00;
}
/* 適用されない */
.sample1 h2:last-child {
  color: #c00;
}


/* 子要素の中で、それぞれ最後のp要素,h2要素に適用、なので*/
/* 適用される */
.sample2 p:last-of-type {
  color: #c00;
}
/* 適用される */
.sample2 h2:last-of-type {
  color: #c00;
}