ywork2020.com

Title

同じ型の兄弟要素がない要素タイプを検知する

目次 (INDEX)

:only-of-typeとは

ここで説明する:only-of-type とは次の語句からなるCSSの疑似クラスです。
only
読み: オンリー
意味: 唯一の、たった一人の
of
読み: オブ
意味: ~の (タイプの)
type
読み: タイプ
意味: 型、種類

目次に戻る

:only-of-type疑似クラスの概要

この疑似クラスはセレクターに該当する要素タイプが兄弟要素の中に一つしかない場合に、その要素を検知します。

これは、:only-of-typeの状態を検知した場合の一時的なプロパティ値の設定であり、 プログラムなどによる要素の追加や削除があれば、 それに準じた処理が行われます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

セレクター:only-of-type{プロパティ名: 設定値;}
:only-of-type{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルには追加と削除のボタンを設けています。 これはjavascriptプログラムを使って要素を操作した場合に、どのような変化が起きるかを見るためのものです。

目次に戻る

参考: 同じ型の兄弟要素がない要素タイプを検知する (要素名)

ここでは初期の要素構成として兄弟要素の中に同じタイプの要素が無い状態を作っています。 p要素とdiv要素が一つずつですので両要素ともに検知されています。

ボタンでdiv要素を追加していただくと分ると思いますが、div要素が二つになると対象外の要素となります。

<body>
	<p>p要素</p>
	<div>div要素</div>
</body>

p要素

div要素

<style>
	:only-of-type{
		background-color: ##lightsalmon;
	}
</style>

目次に戻る

応用: 同じ型の兄弟要素がない要素タイプを検知する (クラス名)

ここでは初期の要素構成として兄弟要素の中に同じクラス名を持つp要素が二つと、 同じクラス名を持たないdiv要素が一つある状態を作っています。

ボタンでclass="clsDivの要素を追加していただくと分ると思いますが、同じクラス名の要素が二つになると対象外の要素となります。

<body>
	<p class ="clsP">p要素</p>
	<p class ="clsP">p要素</p>
	<div class ="clsDiv">div要素</div>
</body>

p要素

p要素

div要素

<style>
	.clsDiv:only-of-type{
		background-color: ##orange;
	}
</style>

目次に戻る