【:first-child擬似クラス】最初の子要素にスタイルを適用する

:first-child擬似クラスでは、指定した要素が、親要素の中の最初の子要素である場合にスタイルを適用することができます。

例えばdiv > p:first-child{}と指定した場合であれば、div要素内に含まれる最初の子要素pに対してのみスタイルが適用されます。 他にもul li:first-child{}とすれば、リストの最初の項目のみに適用できます。

このように:first-child(E:first-child)では、その要素が、ある要素内で最初に現れる子要素であった場合にスタイルが適用されます。 また子要素を対象にスタイルが適用されますので、複数ある段落のうち最初の段落のみに適用したい場合などに利用されます。

なおE:first-childは、E:nth-child(1)を指定した場合と同様の結果となります。

書式

  • 要素名:first-child {プロパティ名:値;} ……… 最初の子要素にスタイルを適用する

使用した時の例

h4:first-child {color: red;}
ul li:first-child {color: blue; text-decoration: underline;}

div {border: solid 1px #ccc;}
<div>
  <h4>h4の内容</h4>
  <p>テキスト</p>
  <h4>h4の内容</h4>
  <p>テキスト</p>
</div>

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

ブラウザ上の表示例

h4の内容

テキスト

h4の内容

テキスト

  • リスト1
  • リスト2
  • リスト3

対応ブラウザなどのデータ

適用対象 ある要素内の最初の子要素
対応ブラウザ Internet Explorer7~ , Google Chrome4~ , Firefox3~ , Opera9.5~ , Safari4~

関連情報