:first-child擬似クラス。

CSSでのセレクタ(選択子)の一つである、:first-child擬似クラスに関して解説します。

`:first-child`擬似クラスとは。

:first-child擬似クラスとは、親要素の一番目の直下要素となる場合に限り対象とする擬似クラスです。

:first-child擬似クラスの書式は、

セレクタ:first-child

です。

ここで、セレクタとしては任意のものが使えますが、対象要素を問わない場合なら全称セレクタ(汎用セレクタ)を省略出来ます。

また、:first-child擬似クラスだけでは親要素を指定していない事に注意して下さい。

例えば、任意の要素の第一番目の直下要素となっている<p>要素を対象とする場合は、以下のように記述します。

p:first-child { }

と記述します。

また、<blockquote>要素の第一番目の直下要素(要素名は問わない)を対象とする場合は、

blockquote > :first-child { }

と記述します。

親要素の開始タグ直後のマークアップされていない生テキスト(匿名ボックス)は、第一番目の直下要素と見なしません。

すなわち、以下の記述の場合、<a>要素は<p>要素の一番目の直下要素となり、:first-child擬似クラスの対象となります。

<p>
    この箇所はマークアップされていない匿名ボックスです。
    <a>アンカー</a>
    この箇所もマークアップされていない匿名ボックスです。
    </p>

:first-child擬似クラスは、

には実装されておりません。

また、

でも挙動がおかしい場合があります。

WAP 2.0では、:first-child擬似クラスは仕様に含まれておりません。