:first-of-type

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

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

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

構文

:first-of-type

例

最初の段落の整形

HTML

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

CSS

p:first-of-type {
  color: red;
  font-style: italic;
}

結果

ネストした要素

この例は、どうやった入れ子になった要素を対象にするかを示します。なお、単純セレクターが書かれていない場合は、ユニバーサルセレクター (*) が暗黙に含まれています。

HTML

<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`.</div>
</article>

CSS

article :first-of-type {
  background-color: pink;
}

結果

仕様書

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

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:first-of-typeChrome 完全対応 1Edge 完全対応 12
補足
完全対応 12
補足
補足 Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.
Firefox 完全対応 3.5IE 完全対応 9
補足
完全対応 9
補足
補足 Internet Explorer treats all unknown elements (such as custom elements) as the same element type.
Opera 完全対応 9.5Safari 完全対応 3.2WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0

凡例

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

関連項目