:empty擬似クラスは、要素が空（内容が何もない）場合に、その要素にスタイルを適用するために使用されます。空の要素とは、文字、スペース、または子要素が含まれていない要素を指します。
INDEX
CSSの:emptyの値とその効果の一覧
- :empty – 要素が空である場合にスタイルを適用します。
注意点と関連情報
:empty擬似クラスは、要素が空であるかどうかを判断し、その要素に対して特定のスタイルを適用します。要素が空であると認識されるためには、文字や子要素が一切含まれていない必要があります。スペースのみが含まれている場合、その要素は空とは見なされません。
:emptyが効かない理由として考えられること
要素にホワイトスペースや改行、コメントが含まれている
:emptyは要素が完全に空である場合にのみ適用されます。要素内にホワイトスペース（空白や改行文字など）が含まれていると、要素は「空」と見なされず、:emptyが適用されません。
対策：要素が完全に空であることを確認します。特にHTMLのフォーマットで余分なスペースや改行がないようにします。
共通するCSSコード
.css-sample-container {
width: 300px;
padding: 20px;
border: 2px solid black;
margin-bottom: 30px;
}
.css-sample-box {
font-size: 16px;
line-height: 1.5;
color: #333;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #333;
}:emptyの表示例
以下は、空の要素に対して適用されるスタイルの表示例です。空の要素には、背景色が灰色に変わり、境界線が赤い破線になります。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box">要素に内容があります。</div>
<div class="css-sample-box"></div> <!-- 空の要素 -->
<div class="css-sample-box"> </div> <!-- 空ではない要素（スペースが含まれています） -->
</div>CSSコード
.css-sample-box:empty {
background-color: lightgray;
border: 1px dashed red;
}表示結果
要素に内容があります。
まとめ
- :empty擬似クラスは、要素が空（内容や子要素がない）場合にスタイルを適用します。
- 要素が空である場合、特定のスタイルを適用して、視覚的に区別することができます。
- スペースが含まれている場合、その要素は空とは見なされない点に注意が必要です。