:first-of-type

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

dt {
  font-weight: bold;
}

dd {
  margin: 3px;
}

dd:first-of-type {
  border: 2px solid orange;
}

<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd>
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd>
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd>
  <dd>7. Oranges</dd>
</dl>

構文

css
:first-of-type {
  /* ... */
}

例

最初の段落の整形

HTML

html
<h2>見出し</h2>
<p>段落 1</p>
<p>段落 2</p>

CSS

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

結果

入れ子になった要素

この例は、入れ子になった要素を対象に含める方法を示します。なお、要素型セレクターが書かれていない場合は、全称セレクター (*) が暗黙に含まれます。

HTML

html
<article>
  <div>これは最初の `div` です。</div>
  <div>これは<span>内側で最初の `span`</span> です。</div>
  <div>
    これは<em>内側で最初の `em`</em>で、一方これは<em>最後の `em` </em>です。
  </div>
  <div>これは<span>スタイル付けされた内側の `span`</span>です</div>
  <p>これは `p` で修飾しています。</p>
  <div>これは最後の `div` です。</div>
</article>

CSS

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

結果

仕様書

Specification
Selectors Level 4
# first-of-type-pseudo

ブラウザーの互換性

関連情報