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

:only-of-type クラス

 :only-of-type クラスは、エレメントが1つの場合に設定されたスタイルを反映する擬似クラスです。

 エレメントが1つであれば対象になります。

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

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

選択するエレメントによる違い

 親エレメント以下を :only-of-type で選択する場合と、エレメントに :only-of-type を指定する場合で表示の設定に違いがあります。

親エレメント以下を選択

 以下のように親エレメントの以下で :only-of-type を指定する場合は、その親エレメント以下で子エレメントとしてひとつならスタイルが反映されます。

:only-of-type例

エレメントを選択

 エレメントを選択する場合は、そのエレメントが子エレメントとしてひとつしかない場合にスタイルを反映します。

:only-of-type例

構文(Syntax)

CSS

HTMLElement:only-of-type {
  style_propaty: value;
	...
}

DOM ( JavaScript )

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

in HTML


in JavaScript


Example

 :only-of-typeの例です。<div>以下でエレメントが1つなら対象として選択します。