備忘録的プログラミングリファレンス

:last-child クラス

 :last-child クラスは、対象とする複数の同じタグエレメントのうち最後のエレメントにスタイルを反映する CSS の擬似クラスです。
 :last-child クラスは、対象とするエレメントが複数なければ選択しません。

 似たクラスに :last-of-type クラスがあります。:last-of-typeクラスは、対象となるエレメントが1つでも最後のエレメントとして選択されます。

:last-child
<style>
li:last-child{
	background-color: green;
}
</style>
<ul>
<li>とら</li>
<li>ねこ</li>
<li>たぬき</li>
</ul>
表示結果
  • とら
  • ねこ
  • たぬき
詳しくは、Example を参照してください

 複数の同じタグエレメントの最後のエレメントが基本的に選択されます。 クラス名などによる場合は、そのクラス名をもつ複数の同じタグエレメントから最後のエレメントが選択されます。

 対になるクラスに :first-child クラスがあります。こちらは最初のエレメントが対象になります。

構文(Syntax)

CSS

HTMLElement:last-child {
  style_propaties;
}

DOM ( JavaScript )

 疑似クラスはDOM ( JavaScript )から操作できません。


 スタイルのみの操作は擬似クラスを利用したほうが簡易です。

in HTML


in JavaScript


Example

 :last-childの例です。対象となる複数の同じタグエレメントのうち最後のエレメントにスタイルを反映しています。

 <div> は一つだけですので、:last-childでは選択されません