【CSS】:only-child（擬似クラス） - １つのみの要素

CSSの擬似クラス/only-childについて解説します。

検証環境

CSS

macOS

14.1

only-child

擬似クラス/only-childは“兄弟要素がない要素の擬似クラス”です。

基本構文

:only-child {
    プロパティ名: プロパティ値;
}

サンプル

only-childを使った『liかつ兄弟要素がない要素』を指定するセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
li:only-child {
___ih_hl_end
    color: red;
}
</style>

<ul>
    <li>Command</li>
</ul>
<hr>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

プレビュー