CSSの:only-child疑似クラスで、親要素内で唯一の子要素にスタイルを適用する方法をわかりやすく解説

:only-child は、要素が親要素の中で唯一の子要素である場合にスタイルを適用する擬似クラスです。他に兄弟要素が存在しない要素に限定してスタイルを適用します。

:only-child の値とその効果の一覧

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

注意点や関連情報

:only-child は、要素がその親の唯一の子要素である場合にのみ適用されます。兄弟要素が存在する場合、このスタイルは適用されません。また、兄弟要素がテキストノードのみの場合も適用されません。

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

兄弟要素が存在する

:only-childは、親要素内でその要素が唯一の子要素である場合に適用されます。兄弟要素が存在する場合、:only-childは機能しません。
対策：要素が親要素の唯一の子要素であることを確認します。不要な兄弟要素が含まれていないかチェックし、兄弟要素がある場合は、他のセレクタ（例: :first-childや:last-child）を使用します。

空白や改行も兄弟要素と見なされる

親要素内で他の子要素がなくても、空白や改行などがDOMに残っていると、:only-childは適用されません。これらも兄弟要素として扱われるため、対象外となることがあります。
対策：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-child

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

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-item-only-child">唯一の子要素</div>
</div>

<div class="css-sample-container">
    <div class="css-sample-item css-sample-item-only-child"">兄弟要素 1</div>
    <div class="css-sample-item css-sample-item-only-child"">兄弟要素 2</div>
</div>

CSSコード

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

表示結果

まとめ

• :only-child は、親要素内で唯一の子要素に対してスタイルを適用する擬似クラスです。
• 他の兄弟要素が存在する場合はスタイルが適用されません。
• 兄弟要素がテキストノードである場合でも、:only-child は適用されません。