:only-child クラス
:only-child クラスは、子エレメントとして1つの場合に設定されたスタイルを反映する擬似クラスです。
子エレメントとして1つしかない場合に選択されます。
div :only-child{
background-color: yellow;
}
詳しくは Example を参照してください
もしエレメントが1つだけという選択をしたい場合は :only-of-type クラスを使用してください。
ページ内 Index
:only-child クラスについて
:only-child クラスは親エレメント以下で使用する場合と、セレクターでエレメントを指定する場合でスタイルの反映に違いがないようです。
:only-of-type クラスでは違いがあります。
親エレメント以下の場合
以下のように親エレメント以下という指定をしても、子エレメントとして1つのときにそのエレメントを選択します。
セレクターでエレメントを指定
セレクターでエレメントを指定しても、そのエレメントが子として一つである場合にスタイルを反映します。
構文(Syntax)
CSS
HTMLElement:only-child { style_propaty: value; ... }
DOM ( JavaScript )
疑似クラスはDOM ( JavaScript )から操作できません。
スタイルのみの操作は擬似クラスを利用したほうが簡易です。
in HTML
in JavaScript
Example
:only-childの例です。 以下は<div>エレメントの中で同じエレメントが複数あり、子エレメントとして1つの場合にそのエレメントが選択されます。