:last-child クラス
:last-child クラスは、対象とする複数の同じタグエレメントのうち最後のエレメントにスタイルを反映する CSS の擬似クラスです。
:last-child クラスは、対象とするエレメントが複数なければ選択しません。
似たクラスに :last-of-type クラスがあります。:last-of-typeクラスは、対象となるエレメントが1つでも最後のエレメントとして選択されます。
<style>
li:last-child{
background-color: green;
}
</style>
<ul>
<li>とら</li>
<li>ねこ</li>
<li>たぬき</li>
</ul>
- とら
- ねこ
- たぬき
詳しくは、Example を参照してください
複数の同じタグエレメントの最後のエレメントが基本的に選択されます。 クラス名などによる場合は、そのクラス名をもつ複数の同じタグエレメントから最後のエレメントが選択されます。
対になるクラスに :first-child クラスがあります。こちらは最初のエレメントが対象になります。
ページ内 Index
構文(Syntax)
CSS
HTMLElement:last-child { style_propaties; }
DOM ( JavaScript )
疑似クラスはDOM ( JavaScript )から操作できません。
スタイルのみの操作は擬似クラスを利用したほうが簡易です。
in HTML
in JavaScript
Example
:last-childの例です。対象となる複数の同じタグエレメントのうち最後のエレメントにスタイルを反映しています。
<div> は一つだけですので、:last-childでは選択されません
関連疑似クラス
似た機能を有する疑似クラスに以下があります。
- :first-child... 複数あるエレメントの内で最初のエレメント(要素)が対象
- :first-of-type... 1つまたは複数あるエレメントの内で最初のエレメント(要素)が対象
- :last-child... 複数あるエレメントの内で最後のエレメント(要素)が対象
- :last-of-type... 1つまたは複数あるエレメントの内で最後のエレメント(要素)が対象