【CSS Modules】:empty疑似クラスの使い方
:empty疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:emptyクラスは、子要素を持たないHTML要素やXML要素を選択するための擬似クラスを表すクラスです。この:emptyは、特定の要素の内部にテキストコンテンツ、空白文字（スペース、タブ、改行など）、コメントノード、あるいは他の要素ノードが一切存在しない、完全に空である状態を識別します。CSS Modules環境では、この擬似クラスを用いて、要素が内容を持たない場合にのみ特定のスタイルを適用できます。
例えば、コンテンツがまだ入力されていない段落要素（<p></p>）や、データが空のリストアイテム（<li></li>）に対して、デフォルトのプレースホルダーを表示したり、要素自体を非表示にしたりするといったスタイリングが可能です。しかし、要素内にたとえ空白文字が一つでも含まれていれば、<p> </p> のように見える場合でも、それは子ノードとして認識されるため、:emptyにはマッチしません。同様に、コメントノード（<!-- コメント -->）が存在する場合も:emptyは適用されません。
また、<img>や<input>などの、そもそも子要素を持つことができないタイプの要素（いわゆるvoid要素や置換要素）は、その構造上常に子ノードが存在しないため、:empty擬似クラスの対象とはなりません。この特性を理解することで、ウェブページのコンテンツ状態に基づいた、より正確で効率的なスタイル制御を実現できます。
公式リファレンス: :empty
構文(syntax)
1selector:empty { 2}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません