【CSS】:only-of-type（擬似クラス） - １つのみの特定要素

CSSの擬似クラスの１つ、only-of-typeについてご紹介します。

only-of-type

擬似クラスonly-of-typeは兄弟要素に特定要素が１つのみの要素です。

基本構文

要素名:only-of-type {
    プロパティ名: プロパティ値;
}

サンプル

次のサンプルコードは兄弟要素にh2要素が１つのみのh2要素にスタイルを適用します。

sample

<style>
h2:only-of-type {
    color: red;
}
</style>

<section>
    <h2>セレクター</h2>
    <p>セレクターは『スタイルを適用する要素』です。</p>
</section>
    <h2>プロパティ名</h2>
    <p>プロパティ名は『スタイルの種類』です。</p>
    <h2>プロパティ値</h2>
    <p>プロパティ値は『スタイルの値』です。</p>
</section>

プレビュー