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

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

サンプル（１）

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

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

サンプル（２）

.sample02>p:only-of-type {
    color: red;
    }