: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>

備考

• スタイルを一番最後の要素に適用したい場合は、:last-child疑似クラスを使用します。

関連項目

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

Tweet