: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使用後のデモページ
子要素の有無だけでなく、改行や半角スペースがある場合も内容がある(空でない)という判別になります。

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

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2023年2月
 1234
567891011
12131415161718
19202122232425
262728