:emptyとは
- ここで説明する:empty とは次の語句からなるCSSの疑似クラスです。
- empty
- 読み: エンプティ
意味: 中身のない、空
:empty疑似クラスの概要
この疑似クラスはセレクタに該当する要素が内に子要素とテキストを含まない時に適用され一時的なプロパティ値の変更を行います。
これは要素内にエレメントノードとホワイトスペースを含むテキストノードが無い状態を指しています。 逆にいうと、コメントノードやCSSのcontentなどは要素が空であるかの判断に影響を与えません。
構文
サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。
セレクター:empty{プロパティ名: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
サンプルに使うのはdiv要素です。 この要素に:empty疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。
参考: 要素の中身が空の時を検知する
ここではサンプルとして要素の中身が空になった時に背景色を透明にするものを用意しました。 要素の中身を空にするためにbutton要素とscriptを使用していますが、その説明については割愛させていただきます。
div要素
div{
background-color: ##khaki;
}
div:empty{
background-color: transparent;
}