:only-of-type クラス
:only-of-type クラスは、この疑似クラスに関連するエレメントが１つだけの場合に指定されたスタイルを反映する擬似クラスです。
この擬似クラスでは、対象となるエレメントが１つであればスタイル指定が反映されます。
div :only-of-type{
background-color: yellow;
}
詳しくは Example を参照してください
もし子エレメントとして１つだけという選択をしたい場合は:only-child クラスを使用してください。
ページ内 Index
選択するエレメントによる違い
親エレメント以下を :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の例です。
:only-of-type クラスは、この疑似クラスに関連するエレメントが１つだけの場合に指定されたスタイルを反映します。
この例では、<div>以下の子エレメントが対象になっています。エレメントが１つなら選択しスタイルを反映します。