: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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

: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

ブラウザーの互換性

関連情報