Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

トップページ
CSSプロパティ辞典
【CSSセレクタ】E:only-child

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

『セレクタ:only-child』で、子要素が唯一の存在だった場合に適用できます。こちらは一般に『擬似クラス』と呼ばれます。『:first-child :last-child』や『:nth-child(1):nth-last-child(1)』と指定した場合と等価ですが、詳細度(優先度)はそれらより低く設定されます。IE8以下では動きません。

サンプルコード

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>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ