【CSS】:first-child(擬似クラス) - 最初の要素

【CSS】:first-child(擬似クラス) - 最初の要素

CSSの擬似クラスの1つ、first-childについてご紹介します。

first-child

擬似クラスfirst-childは兄弟要素の最初の要素です。

基本構文

:first-child {
    プロパティ名: プロパティ値;
}

サンプル

次のサンプルコードは『h2かつ最初の要素』にスタイルを適用します。

<style>
h2:first-child {
    color: red;
}
</style>

<section>
    <h2>セレクター</h2>
    <p>セレクターは『スタイルを適用する要素』です。</p>
    <h2>プロパティ名</h2>
    <p>プロパティ名は『スタイルの種類』です。</p>
    <h2>プロパティ値</h2>
    <p>プロパティ値は『スタイルの値』です。</p>
</section>

スタイルのh2をpに変更すると、『pかつ最初の要素』が存在しないため適用される要素はありません。

p:first-child {
    color: red;
}