CSS :only-of-type 疑似クラス：子要素の中で唯一のタグ名を持つ要素の選択

定義と使い方

:only-of-type疑似クラスセレクターは、
特定の型（タグ名）を持つ兄弟要素の中で、その型に該当する要素が1つしか存在せず、かつ先頭であり最後でもある唯一（only・単独）の要素を選択します。

特定の型とは、タグ名の型を指します。

例えば、p:only-of-typeは、親を持つ子要素の中で<p>要素が1つだけ存在する場合に、その<p>要素を選択します。

基本例

HTML

<div>
    <p>唯一のp要素です。</p>
    <span>これはspanです。</span>
</div>

<div>
    <p>1つ目のp要素です。</p>
    <p>2つ目のp要素です。</p>
</div>

構文

例

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

同じ型（タグ名）の兄弟要素が存在しない場合に使用

注意点

:only-of-type疑似クラスセレクターは、特定の型（タグ名）を持つ兄弟要素の中で、その型を基準として最初かつ最後に位置する唯一（only・単独）の要素を選択します。

特定の型とは、タグ名の型を指します。

言い換えると、タグ名が唯一である必要があるという意味であり、唯一のセレクターが必要であるという意味ではありません。

次の例で確認します。

HTML

<style>
    .red-item:only-of-type {
        color: red;
        font-weight: bold;
    }
</style>
<div>
    <p>段落要素です。</p>
    <p class="red-item">マッチする要素だと期待しますが、該当しません。</p>
    <p>段落要素です。</p>
</div>
<!--
    * もしかして、.red-item型の中から唯一（only・単独）の要素を選択していますか？
    * それであれば、誤った選択です。
    *
    * only-of-typeは、タグ型の兄弟要素の中から唯一の要素を選択します。
    *
    * .red-item:only-of-typeは、次の2つの要素に分けて考えられます。
    * => .red-item：class属性の値が「red-item」である要素のタグ名は<p>です。
    * => 特定の型とは、タグ名の型を意味します。
    * => <p>要素が特定の型になります。
    * => タグ型が<p>である兄弟要素の中で、唯一class属性の値が「red-item」である場合に選択されます。
    * => したがって、上記の要素の中にマッチする要素は存在しません。
-->