Caution

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

CSSプロパティ辞典

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

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

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

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

サンプルコード

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

ブラウザでの表示結果

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

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

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

div p.hoge:first-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>

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

div :first-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系標準ブラウザ

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

トップページへ