[CSS] 構造擬似クラス :only-child と :only-of-type の違いと使い分け

:only-child と :only-of-type は、どちらも「特定の条件を満たす要素にだけ適用される」構造擬似クラスです。
判定条件が異なるため、使い分けが重要です。

:only-child

親要素の中で、その要素が唯一の子要素である場合に適用されます。

→ p:only-child は適用される

:only-child の基本的な使い方デモ

See the Pen :only-child の基本的な使い方デモ by mkl may (@mkl-may) on CodePen.

:only-child のよくある実用例

See the Pen :only-child のよくある実用例 by mkl may (@mkl-may) on CodePen.

:only-of-type

同じ種類（同じタグ名）の要素が、親要素の中でその要素1つだけである場合に適用されます。

※他の種類の要素が複数あっても問題ありません。
「同じタグが1つだけかどうか」で判定されます。

→ p:only-of-type は適用される（pタグが1つだけのため）

:only-of-type の基本的な使い方デモ

See the Pen :only-of-type の基本的な使い方デモ by mkl may (@mkl-may) on CodePen.

:only-of-type のよくある実用例

See the Pen :only-of-type のよくある実用例 by mkl may (@mkl-may) on CodePen.

使い分け

:only-child と :only-of-type の違いは以下の通りです。

状況	:only-child	:only-of-type
子要素が1つだけ	○	○
子要素は複数だが 同じタグは1つ	×	○
同じタグが複数ある	×	×

まとめ

• :only-child → 親要素の中で「子要素が1つだけ」
• :only-of-type → 親要素の中で「同じタグが1つだけ」

迷った場合は、「他のタグがあってもOKかどうか」で判断するとわかりやすいです。