CSS3 :only-child擬似クラスを使って、子要素が一つだけの場合にスタイル適用

:only-child擬似クラスを使うことで、子要素が一つだけの場合に限ってスタイルを適用することができます。

サンプル（１）は、同じboxを並べ、その直下の子要素（この場合p要素）が一つの場合のみ、文字色が変わります。

サンプル（１）

.sample01>p:only-child {
    color:blue;
    }

一つ目の子要素のpタグ

二つ目の子要素のpタグ

三つ目の子要素のpタグ

一つ目の子要素のpタグ

二つ目の子要素のpタグ

サンプル（２）は、div要素で階層を作っています。各boxが内包する子孫要素ごとに、その要素の子要素（この場合p要素）が一つの場合のみ、文字色が変わります。

サンプル（２）

.sample02 p:only-child {
    color:blue;
    }

一つ目の孫要素のpタグ

二つ目の孫要素のpタグ

一つ目の孫要素のpタグ

二つ目の孫要素のpタグ

一つ目の孫要素のpタグ

サンプル（３）は、サンプル（２）と同様ですが、さらに階層が深くなっても、それぞれの要素の子要素（この場合p要素）が一つの場合のみ、CSSが適用されます。下側の例は、子要素がspan要素の場合を混在させています。p要素とspan要素がそれぞれ一つだけであっても、あわせて二つの場合、CSSは適用されません。

サンプル（３）

.sample03 p:only-child {
    color:blue;
    }
.sample03 span:only-child {
    color:purple;
    }

一つ目の曽孫要素のpタグ

二つ目の曽孫素のpタグ

一つ目の曽孫要素のpタグ

一つ目の孫要素のpタグ

一つ目の曽孫要素のpタグ

二つ目の曽孫要素のpタグ

一つ目の曽孫要素のspanタグ

一つ目の曽孫要素のpタグ

一つ目の孫要素のpタグ

二つ目の孫要素のspanタグ