CSS:first-child 疑似クラスは、兄弟要素のグループの中で最初の要素を表します。

/* 兄弟要素の中で最初の <p> をすべてを選択 */
p:first-child {
  color: lime;
}

メモ: 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

構文

:first-child

基本的な例

HTML

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

CSS

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

結果

リストのスタイル付け

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

CSS

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

結果

仕様書

仕様書 策定状況 コメント
Selectors Level 4
:first-child の定義
草案 選択する要素に親を必要としないようにした。
Selectors Level 3
:first-child の定義
勧告 変更なし。
CSS Level 2 (Revision 1)
:first-child の定義
勧告 初回定義。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 3IE 完全対応 7
補足
完全対応 7
補足
補足 Internet Explorer 7 doesn't update :first-child styles when elements are added dynamically.
補足 In Internet Explorer 8, if an element is inserted dynamically by clicking on a link, then the :first-child style isn't applied until the link loses focus.
Opera 完全対応 9.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 9.5Safari iOS 完全対応 4Samsung Internet Android 完全対応 あり
Matches elements with no parentChrome 完全対応 57Edge ? Firefox 完全対応 52IE ? Opera 完全対応 44Safari ? WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile ? Firefox Android 完全対応 52Opera Android 完全対応 44Safari iOS ? Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank
最終更新者: mfuji09,