備忘録的プログラミングリファレンス

:only-child クラス

 :only-child クラスは、子エレメントとして1つの場合に設定されたスタイルを反映する擬似クラスです。
 子エレメントとして1つしかない場合に選択されます。

:only-child例
div :only-child{
	background-color: yellow;
}
詳しくは Example を参照してください

 もしエレメントが1つだけという選択をしたい場合は :only-of-type クラスを使用してください。

:only-child クラスについて

 :only-child クラスは親エレメント以下で使用する場合と、セレクターでエレメントを指定する場合でスタイルの反映に違いがないようです。
 :only-of-type クラスでは違いがあります。

親エレメント以下の場合

 以下のように親エレメント以下という指定をしても、子エレメントとして1つのときにそのエレメントを選択します。

:only-child例

セレクターでエレメントを指定

 セレクターでエレメントを指定しても、そのエレメントが子として一つである場合にスタイルを反映します。

:only-child例

構文(Syntax)

CSS

HTMLElement:only-child {
  style_propaty: value;
	...
}

DOM ( JavaScript )

 疑似クラスはDOM ( JavaScript )から操作できません。
 スタイルのみの操作は擬似クラスを利用したほうが簡易です。

in HTML


in JavaScript


Example

 :only-childの例です。 以下は<div>エレメントの中で同じエレメントが複数あり、子エレメントとして1つの場合にそのエレメントが選択されます。