:last-childとは
- ここで説明する:last-child とは次の語句からなるCSSの疑似クラスです。
- last
- 読み: ラスト
意味: 最後の、最近の - child
- 読み: チャイルド
意味: 子、子供
:last-child疑似クラスの概要
この疑似クラスはセレクタに該当する要素の兄弟要素グループから最後にある要素を検知して一時的なプロパティ値の変更を行います。
例えばp:last-childとした場合、兄弟要素の最後あるp要素を指定したことになります。 説明の補足としては、この:last-childは最後にp要素がない場合にはプロパティは適用されません。 あくまでも子要素の最後にp要素があることが前提です。 pを指定しない場合は暗黙的に(*)ユニバーサルセレクターを指定したことになり、兄弟要素の全てをグループとして指しているので、 単純に最後の要素ということになります。
この疑似クラスを使ったプロパティ値の設定はあくまでも一時的な値の設定であり、 プログラムなどによる要素の追加や削除で最後の要素が変更された場合には、それに準じた処理が行われます。
類似した疑似クラスとして :last-of-type があります。 非常に似ていますが、明らかに動作が違いますので状況により、使い分けてください。
構文
サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。
セレクター:last-child{プロパティ名: 設定値;}
:last-child{プロパティ名: 設定値;}
実機サンプルとサンプルコード
ここからは実際のHTML要素に:last-child疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。
参考: 兄弟要素の最後の要素を検知する
ここではシンプルに兄弟要素の最後にあるp要素の背景色を変更するサンプルを見て下さい。 また最後にp要素が無い場合にはプロパティが適用されていないことにも着目してください。
このサンプルではdiv要素の子要素であるp要素を対象に:last-childを使っています。 このサンプルの場合だと上段のdiv要素の兄弟要素にはp要素しかありませんので、特にp要素に限定する必要はありません。実際はp:last-childでなくても :last-childとしても構わないということになります。 しかし、下段のdiv要素には兄弟要素の中にbr要素も含まれています。この要素構成でのプロパティの適用の違いが着目点となります。
:last-childとした場合には暗黙的に(*)ユニバーサルセレクタを指定したことになりますから *:last-childと指定したことと同じになります。
<body>
<div><p>これは段落です。</p><p>これは段落です。</p></div>
<div><p>これは段落です。</p>これは改行です。<br></div>
</body>これは段落です。
これは段落です。
これは段落です。
これは改行です。<style>
div{
border: thin dashed currentColor;
}
div p{
margin: 5px;
}
div p:last-child{
background-color: ##lightpink;
}
</style>参考: 兄弟要素の中で最後の疑似要素を検知することはできない
ここでは一つのアイディアとして兄弟要素の中の最後に疑似要素を挿入し、その疑似要素にCSSスタイルを適用してみようと思います。 しかし、実際には:last-childでは疑似要素を要素として認識できませんので、 サンプルでは::after疑似要素を使ってlabel要素の中に疑似要素を挿入しています。
<body>
<p><input type="checkbox" id="idCheck1">: <label for="idCheck1">Label for </label></p>
<p><input type="checkbox" id="idCheck2">: <label for="idCheck2">Label for </label></p>
</body>:
:
<style>
p{
margin: 3em 0;
}
p label::after{
content: attr(for);
}
p label:last-child{
background-color: ##lightblue;
}
</style>