定義と使い方

:first-child 疑似クラスセレクターは、親要素の子要素の中で一番最初に位置する要素を選択します。

:first-child 疑似クラスセレクターは、:nth-child(1) と同等です。

補足説明
:nth-child(n)は、親要素の子要素の中で順番が n 番目の要素を選択する疑似クラスです。

基本例

HTML 
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
CSS 
li:first-child {
    background-color: yellowgreen;
}
実際に適用した結果

構文

CSS 
:first-child {
    /* ... */
}

例

:first-child 疑似クラスセレクターを理解するのに役立つ例です。

最初の見出し要素のスタイリング

HTML 
<article>
    <h2>見出し要素</h2>
    <p>段落要素 1</p>
    <p>段落要素 2</p>
</article>
CSS 
article h2:first-child {
    background-color: yellowgreen;
}
実際に適用した結果

入れ子になった要素のスタイリング

HTML 
<article>
    <div>この 'div' は1番目です。</div>
    <div>この <span>入れ子になった 'span' は1番目です。</span>!</div>
    <div>
        この <em>入れ子になった 'em' は1番目です。</em>、しかし <em>入れ子になったこの 'em' は最後です。</em>!
    </div>
    <div>この <span>入れ子になった 'span' はスタイルされます。</span>!</div>
    <p>この 'p' は1番目ではありません。</p>
    <div>この 'div' は最後です。</div>
</article>
CSS 
article *:first-child {
    background-color: yellowgreen;
}
実際に適用した結果

ブラウザ互換性

最終更新日:

:first-child疑似クラスのブラウザ互換性
セレクタ
デスクトップ Chrome
Chrome
デスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
:first-child 4 12 3 3.1
親要素がない要素と一致 57 79 52 いいえ

caniuse.comで詳しい情報をご確認ください。

仕様書

:first-child疑似クラスの仕様書
仕様書
:first-child Selectors Level 4
#first-child-pseudo

参考資料

関連項目