【CSSセレクタ】E:only-child

div p:only-child { color: red;} /* div要素の中のp要素が唯一の存在だった場合に赤字にします。 */
div.hoge :only-child { color: blue;} /* 『hoge』というクラス名を持つdiv要素の子要素が一つだけだった場合、その子要素を青字にします。 */

div p:only-child { color: red;} /* div要素の中のp要素が唯一の存在だった場合に赤字にします。 */
div.hoge :only-child { color: blue;} /* 『hoge』というクラス名を持つdiv要素の子要素が一つだけだった場合、その子要素を青字にします。 */

<div>
	<p>ここはp要素です。</p>
</div>
<div class="hoge">
	<div>ここはdiv要素です。</div>
</div>
<div>
	<p>ここはp要素です。</p>
	<div>ここはdiv要素です。</div>
</div>

注意点としてid名やクラス名、属性などからの特定と『:only-child』を併用した場合、まずその要素が唯一の存在であるかどうかの特定を行った後になおかつ指定された要素名、id名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:only-child』と指定した場合、子要素がp要素しか存在しておらず、さらに『hoge』というクラス名を持っていた場合に限りデザインが当たります。

div p.hoge:only-child { color: red;} /* div要素の子要素のp要素が子要素としての唯一の存在であり、さらに『hoge』というクラス名を持っていた場合のみに赤字にします。 */

<div>
	<p class="hoge">ここはdiv要素の中の『hoge』というクラス名を持つp要素です。</p>
</div>
<div>
	<p>ここはdiv要素の中のp要素です。</p>
</div>

デスクトップ

Chrome

2 以降 ○

1 以前 ×

Firefox

1.5 以降 ○

Safari

3.1 以降 ○

2 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9.5 以降 ○

8 以前 ×

モバイル

iOS Safari

2 以降 ○

1 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。