Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

トップページ
CSSプロパティ辞典
【CSSセレクタ】E:last-of-type

【CSSセレクタ】E:last-of-type

『セレクタ:last-of-type』で、同じ要素名を持つ最後の子要素に適用できます。こちらは一般に『擬似クラス』と呼ばれます。『:nth-last-of-type(1)』と指定した場合と等価です。IE8以下では動きません。

『:last-child』との違いは他の要素をカウントするかどうか、というところがあげられます。例えば『p:last-child』と指定した場合、最後の子要素がp要素でない場合はデザインが反映されません。

サンプルコード

div p:last-of-type { color: red;} /* div要素の中の最後のp要素を赤字にします。 */

ブラウザでの表示結果

div p:last-of-type { color: red;} /* div要素の中の最後のp要素を赤字にします。 */

<div>
	<p>ここはp要素です。</p>
	<div>ここはdiv要素です。</div>
	<p>ここはp要素です。</p>
	<div>ここはdiv要素です。</div>
</div>

注意点としてid名やクラス名、属性などからの特定と『:last-of-type』を併用した場合、まず要素名からの特定を行った後になおかつ指定されたid名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:last-of-type』と指定した場合、子要素のうちの最後のp要素が『hoge』というクラス名を持っていた場合に限りデザインが当たります。子要素のうちの最後の『hoge』というクラス名を持つp要素、といった特定方法ではありませんのでご注意ください。

div p.hoge:last-of-type { color: red;} /* div要素の子要素の最後のp要素が『hoge』というクラス名を持っていた場合に赤字にします。 */

<div>
	<p class="hoge">ここはdiv要素の中の最初の『hoge』というクラス名を持つp要素です。</p>
	<p class="hoge">ここはdiv要素の中の最後の『hoge』というクラス名を持つp要素です。</p>
</div>
<div>
	<p>ここはdiv要素の中の最初のp要素です。</p>
	<p class="hoge">ここはdiv要素の中の『hoge』というクラス名を持つp要素です。</p>
	<p class="hoge">ここはdiv要素の中の『hoge』というクラス名を持つp要素です。</p>
	<p>ここはdiv要素の中の最後のp要素です。</p>
</div>

全ての最後の子要素を指定したい場合は『*:last-of-type』もしくは『:last-of-type』と指定します。この場合は子要素として存在している全ての要素名ごとにカウントした最後の要素に対して適用されます。例えば子要素にp要素、span要素が存在した場合は最後のp要素と最後のspan要素にそれぞれデザインが当たります。

div :last-of-type { color: red;} /* 子要素の要素名ごとにカウントした最後の子要素を赤字にします。 */

<div>
	<div>ここはdiv要素です。</div>
	<p>ここはp要素です。</p>
	<div>ここはdiv要素です。</div>
	<p>ここはp要素です。</p>
</div>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ