ywork2020.com

Title

兄弟要素の中で最初の要素タイプを検知する

目次 (INDEX)

:first-of-typeとは

ここで説明する:first-of-type とは次の語句からなるCSSの疑似クラスです。
first
読み: ファースト
意味: 最初の、先頭の
of
読み: オブ
意味: ~の (タイプの)
type
読み: タイプ
意味: 型、種類

目次に戻る

:first-of-type疑似クラスの概要

この疑似クラスはセレクターに該当する要素の兄弟タイプのグループから先頭にある要素を検知して一時的なプロパティ値の変更を行います。

例えばp:first-of-typeとした場合、兄弟要素の中にある最初のp要素を指定したことになります。 pを指定しない場合は暗黙的に(*)ユニバーサルセレクターを指定したことになり、兄弟要素の全てをグループとして指しているので、 単純に先頭の要素ということになります。

この疑似クラスを使ったプロパティ値の設定はあくまでも一時的な値の設定であり、 プログラムなどによる要素の追加や削除で最初の要素が変更された場合には、それに準じた処理が行われます。

類似した疑似クラスとして :first-child があります。 非常に似ていますが、明らかに動作が違いますので状況により、使い分けてください。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

セレクター:first-of-type{プロパティ名: 設定値;}
:first-of-type{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素に:first-of-type疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。

目次に戻る

参考: 兄弟要素の中で最初の要素タイプを検知する

ここではシンプルに兄弟要素の中の先頭にあるp要素の背景色を変更するサンプルを見て下さい。

このサンプルではdiv要素の子要素であるp要素を対象に:first-of-typeを使っています。 このサンプルの場合だと上段のdiv要素の兄弟要素にはp要素しかありませんので、特にp要素に限定する必要はありません。実際はp:first-of-typeでなくても :first-of-typeとしても構わないということになります。 しかし、下段のdiv要素には兄弟要素の中にbr要素も含まれています。この要素構成でのプロパティの適用の違いが着目点となります。

:first-of-typeとした場合には暗黙的に(*)ユニバーサルセレクタを指定したことになりますから *:first-of-typeと指定したことと同じになります。

<body>
	<div><p>これは段落です。</p><p>これは段落です。</p></div>
	<div>これは改行です。<br><p>これは段落です。</p></div>
</body>


これは段落です。

これは段落です。

これは改行です。

これは段落です。

<style>
	div{
		border: thin dashed currentColor;
	}
	div p{
		margin: 5px;
	}
	div p:first-of-type{
		background-color: ##lightpink;
	}
</style>

目次に戻る