:only-of-type擬似クラスを使うことで、子要素に他の要素タイプがあっても、指定した要素タイプが一つだけなら、スタイルを適用することができます。 よく似たものとして、:only-child擬似クラスがありますが、こちらは、子要素が指定した要素タイプの子要素一つのみの場合(他のタイプの要素も無しで)に限ってスタイルを適用することができます。

サンプル(1)は、同じbox(それぞれクラス名が"sample01")を並べ、その直下に子要素(この場合p要素やspan要素)が入っています。次のソースのように、比較用の:only-child擬似クラスを使うと、子要素がp要素一つのみの場合に限って、文字色が赤になります。

サンプル(1)

.sample01>p:only-child {
    color: red;
    }
一つ目の子要素のspanタグ

一つ目の子要素のpタグ


二つ目の子要素のspanタグ

一つ目の子要素のpタグ

一つ目の子要素のpタグ


一つ目の子要素のspanタグ

 

サンプル(2)は、サンプル(1)と同様に並べたbox(それぞれクラス名が"sample02")で、次のソースのように、:only-of-type擬似クラスを使って、子要素に他の要素タイプを含んでいても、p要素が一つだけなら、文字色を赤にしています。その結果、すべてのboxでp要素の文字色が赤になります。

サンプル(2)

.sample02>p:only-of-type {
    color: red;
    }
一つ目の子要素のspanタグ

一つ目の子要素のpタグ


二つ目の子要素のspanタグ

一つ目の子要素のpタグ

一つ目の子要素のpタグ


一つ目の子要素のspanタグ

 

 

戻るボタン