: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>