CSS3スタイル虎の巻

:first-child疑似クラス

:first-childは、一番最初の子要素にスタイルを適用する疑似クラスです。

解説

一番最初の子要素にスタイルを適用します。

構文

構文は以下になります。

要素:first-child {スタイル}

サンプル

リストの一番初めの要素の背景色を赤色にする


ul.sample01 li:first-child{
  background-color:red;
}

<ul class="sample01">
  <li>いぬ</li>
  <li>ねこ</li>
  <li>たぬき</li>
</ul>
  • いぬ
  • ねこ
  • たぬき

定義リストの一番最初のdt要素を太文字にする


dl.sample02 dt:first-child{
  font-weight:bold;
}

<dl class="sample02">
  <dt>北海道</dt>
  <dd>札幌市</dd>
  <dt>青森県</dt>
  <dd>青森市</dd>
  <dt>岩手県</dt>
  <dd>盛岡市</dd>
</dl>
北海道
札幌市
青森県
青森市
岩手県
盛岡市

備考

関連項目

  • :first-of-type:指定した子要素で一番最初の要素にスタイルを適用する
  • :last-of-type:指定した子要素で一番最後の要素にスタイルを適用する
  • :first-child:一番最初の子要素にスタイルを適用する
  • :last-child:一番最後の子要素にスタイルを適用する
  • :nth-of-type(n):指定したn番目の子要素にスタイルを指定する
  • :nth-child(n):指定した要素のn番目の子要素にスタイルを適用する