CSS :first-of-type疑似クラス：同じタグ名を持つ兄弟要素の中から最初の要素を選択

定義と使い方

:first-of-type疑似クラスセレクターは、
特定のタイプ（タグ名）の兄弟要素の中のみを基準として、最初に位置する要素を選択します。

特定のタイプとは、タグ名の種類を指します。

例えば、p:first-of-typeは、同じ親を持つ<p>要素のみを数え、その中で最初の<p>要素を選択します。

基本例

HTML

<section>
    <p>'p'タグタイプの中で最初の要素</p>
    <div>'div'タグタイプの中で最初の要素</div>
    <p>'p'タグタイプの中で2番目の要素</p>
    <p>'p'タグタイプの中で3番目の要素</p>
    <div>'div'タグタイプの中で2番目の要素</div>
    <div>'div'タグタイプの中で3番目の要素</div>
</section>

CSS

/* <section>の<p>タグタイプの子要素の中で
 * <p>タグタイプを基準として
 * 最も最初に位置する要素
*/
section p:first-of-type {
    background-color: yellowgreen;
}

/* <section>の<div>タグタイプの子要素の中で
 * <div>タグタイプを基準として
 * 最も最初に位置する要素
*/
section div:first-of-type {
    background-color: orange;
}

構文

例

:first-of-type疑似クラスセレクターを理解するのに役立つ例です。

最初の段落要素のスタイリング

ネストされた要素のスタイリング

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>

注意点

:first-of-type疑似クラスセレクターは、特定のタイプ（タグ名）の兄弟要素の中から、そのタイプを基準として最も最初に位置する要素を選択します。

特定のタイプとは、タグ名の種類を指します。

次の例で見ていきましょう。

HTML

<style>
    .red-item:first-of-type {
        color: red;
        font-weight: bold;
    }
</style>
<ol>
    <li>red-itemクラス値がありません</li>
    <li class="red-item">マッチする要素だと期待されますが該当しません</li>
    <li class="red-item">li</li>
</ol>
<!--
    * もしかして、.red-itemタイプの中で最初の要素を選択したと思っていませんか？
    * それであれば、誤った選択です。
    *
    * :first-of-typeは、タグタイプの兄弟要素の中で最も最初に位置する要素を選択します。
    *
    * .red-item:first-of-typeは、次の2つの要素に分けて考えられます。
    * => .red-item：クラス属性の値が'red-item'である要素のタグ名は<li>です。
    * => 特定のタイプとは、タグ名のタイプを意味します。
    * => <li>要素が特定のタイプになります。
    * => タグタイプが<li>である最初の要素が、'red-item'というクラス属性の値を持っている場合に選択されます。
    * => そのため、上記の要素の中にマッチする要素は存在しません。
-->