:empty擬似クラスを使ってみる

内容を持たない要素に対してスタイルを設定できる:empty擬似クラスを使ってみます。

サンプルコード

まずは設定前の例です。

<h2>空の場合</h2>
<div class="sample"></div>
<h2>子要素がある場合</h2>
<div class="sample"><p>子要素</p></div>
<h2>半角スペースを含む場合</h2>
<div class="sample"> </div>
<h2>改行を含む場合</h2>
<div class="sample">
</div>
<h2>jsで要素を追加する場合</h2>
<div id="sample" class="sample"></div>

.sample {
	padding: 10px;
	background: red;
}

この場合、すべての.sampleに対してスタイルが設定されます。
:empty使用前のデモページ

次に:emptyを設定してみます。

.sample {
	padding: 10px;
	background: red;
}
.sample:empty {
	padding: 0;
	background: none;
}

.sampleの内容が空の場合のみ:emptyのスタイルが設定されました。
:empty使用後のデモページ
子要素の有無だけでなく、改行や半角スペースがある場合も内容がある(空でない)という判別になります。

ブログやお知らせの記事、フォームのエラーメッセージなど、データがない場合のスタイルを設定したいときに便利です。