CSSの:only-of-type疑似クラスで、親要素内で特定のタイプの要素が唯一の場合にスタイルを適用する方法をわかりやすく解説

:only-of-type は、特定のタグが親要素内で唯一の要素タイプである場合にスタイルを適用する擬似クラスです。他に同じタイプの兄弟要素が存在しない場合にのみスタイルが適用されます。

:only-of-type の値とその効果の一覧

• :only-of-type – 親要素の中で唯一の要素タイプにスタイルを適用します。

注意点や関連情報

:only-of-type は、同じタグの兄弟要素が存在しない場合にスタイルが適用されます。他の要素が存在しても、それが異なるタイプであれば問題ありませんが、同じ要素タイプが存在すると効果は適用されません。

:only-of-typeが効かない理由として考えられること

同じタイプの兄弟要素が存在する

:only-of-typeは、親要素内でその要素が唯一の同じタグ名（同じタイプ）の要素である場合に適用されます。親要素内に同じタグ名の兄弟要素が存在すると、:only-of-typeは機能しません。
対策：対象の要素が親要素内で唯一の同じタイプの要素であるか確認します。兄弟要素に同じタグ名の要素が含まれていないことをチェックします。

空白や改行も要素と見なされていないか

HTML内で不要な空白や改行がDOMに残っていると、兄弟要素として認識され、:only-of-typeが機能しないことがあります。
対策：HTMLコード内で不要な空白や改行が含まれていないか確認し、整理します。特にインデントや改行が意図せずに認識されないように注意します。

共通するCSSコード

.css-sample-container {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    max-width: 400px;
}

.css-sample-item {
    padding: 10px;
    margin-bottom: 5px;
}

表示例

CSS :only-of-type

:only-of-type は、親の中で唯一の要素タイプにスタイルを適用します。

HTMLコード

<div class="css-sample-container">
    <p class="css-sample-item css-sample-item-only-of-type">唯一のp要素</p>
</div>

<div class="css-sample-container">
    <p class="css-sample-item css-sample-item-only-of-type">p要素 1</p>
    <p class="css-sample-item css-sample-item-only-of-type">p要素 2</p>
    <span class="css-sample-item css-sample-item-only-of-type">span要素</span>
</div>

CSSコード

.css-sample-item-only-of-type:only-of-type {
    background-color: lightgreen;
}

表示結果

まとめ

• :only-of-type は、親要素内で同じタイプの他の兄弟要素が存在しない場合にスタイルを適用します。
• 兄弟要素が異なるタグ（例: p と span）であれば問題なく適用されます。
• 同じ要素タイプが複数存在する場合、スタイルは適用されません。