:last-of-typeとは
- ここで説明する:last-of-type とは次の語句からなるCSSの疑似クラスです。
- last
- 読み: ラスト
意味: 最後の、末尾の - of
- 読み: オブ
意味: ～の (タイプの) - type
- 読み: タイプ
意味: 型、種類
:last-of-type疑似クラスの概要
この疑似クラスはセレクターに該当する要素の兄弟タイプのグループから最後にある要素を検知して一時的なプロパティ値の変更を行います。
例えばp:last-of-typeとした場合、兄弟要素の中にある最後のp要素を指定したことになります。 pを指定しない場合は暗黙的に(*)ユニバーサルセレクターを指定したことになり、兄弟要素の全てをグループとして指しているので、 単純に最後の要素ということになります。
この疑似クラスを使ったプロパティ値の設定はあくまでも一時的な値の設定であり、 プログラムなどによる要素の追加や削除で最後の要素が変更された場合には、それに準じた処理が行われます。
類似した疑似クラスとして :last-child があります。 非常に似ていますが、明らかに動作が違いますので状況により、使い分けてください。
構文
サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。
セレクター:last-of-type{プロパティ名: 設定値;}
:last-of-type{プロパティ名: 設定値;}
参考: 兄弟要素の中で最後の要素タイプを検知する
ここではシンプルに兄弟要素の中の最後にあるp要素の背景色を変更するサンプルを見て下さい。
このサンプルではdiv要素の子要素であるp要素を対象に:last-childを使っています。 このサンプルの場合だと上段のdiv要素の兄弟要素にはp要素しかありませんので、特にp要素に限定する必要はありません。実際はp:last-childでなくても :last-childとしても構わないということになります。 しかし、下段のdiv要素には兄弟要素の中にbr要素も含まれています。この要素構成でのプロパティの適用の違いが着目点となります。
:last-of-typeとした場合には暗黙的に(*)ユニバーサルセレクタを指定したことになりますから *:last-of-typeと指定したことと同じになります。
<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-of-type{
background-color: ##lightpink;
}
</style>