ywork2020.com

Title

一人っ子要素を検知する

目次 (INDEX)

:only-childとは

ここで説明する:only-child とは次の語句からなるCSSの疑似クラスです。
only
読み: オンリー
意味: 唯一の、たった一人の
child
読み: チャイルド
意味: 子、子供

目次に戻る

:only-child疑似クラスの概要

この疑似クラスはセレクタに該当する要素のうち、一人っ子の要素を検知して一時的なプロパティ値の変更を行います。

別の表現でいうならば兄弟要素が無い要素を検知するということです。 これは、一人っ子の状態を検知した場合の一時的なプロパティ値の設定であり、 プログラムなどによる要素の追加や削除があれば、 それに準じた処理が行われます。

目次に戻る

構文

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

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

目次に戻る

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

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

目次に戻る

参考: 一人っ子要素を検知する

ここではclass属性を付けたsamp要素の子要素に:only-childを使ってみました。 サンプルコードでは「 :only-child 」を使っていますので「 *:only-child 」全ての一人っ子要素という意味になります。

もしも、ここで「 div:only-child 」としたならdiv要素が一人っ子にならないと検知されません。 ただし、このサンプルの場合、子要素にdivしかありませんので、結果に違いはありません。 

<body>
	<samp class ="clsSample">
		<div>div要素</div>
	</samp>
	<samp class ="clsSample">
		<div>div要素</div>
		<div>div要素<div>div要素</div></div>
	</samp>
</body>

div要素
div要素
div要素
div要素
 

<style>
	.clsSample{
		display: block;
		margin: 5px;
		padding: 5px;
		border: medium double ##gray;
		background-color: ##khaki;
		width: fit-content;
		float: left;
	}
	.clsSample div{
		margin: 5px;
		padding: 5px;
		background-color: ##lightblue;
		border: thin dashed ##blue;
	}
	.clsSample :only-child{
		background-color: ##lightpink;
		border: medium dashed ##red;
	}
	.clsSample :only-child::after{
		content: " (only-child)";
	}
</style>

目次に戻る