:first-of-type

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

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

構文

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

結果

仕様書

ブラウザー実装状況

関連項目

• :first-child, :last-of-type, :nth-of-type