コニファ・ロゴ

csstest:CSS3 empty疑似クラスと、:before擬似要素を使って、空要素であることを明示的に表示

:empty疑似クラスは、指定要素内が空の場合にCSSが適用されます。指定要素内にテキストや要素、空白(全角、半角とも)や 「&」 などがあるときは、空とはならないため、CSSは適用されません。

次のサンプルは、すべてのtdの背景を水色に指定したtableです。このtdのうち、空のものを:empty疑似クラスを使って判別、CSSで背景色を白に変更しています。さらに、:empty疑似クラスと:before擬似要素を使って、赤色文字で「empty」を追加して、空だということを強調しています。

サンプルの最下段左は半角の空白が、また最下段右は、span要素(<span></span>)がそれぞれ入っています。見た目はなにもありませんが、空とはならないため、CSSの変更は適用されません。。

サンプル(table)

1234 56789 999aa 77v-vr
dummyデータ bb888 xy-666
12554455 mm445566 東京都
サンプル444 99554885 wepp-9999 埼玉県
64646433 fff55

サンプルのCSSソース

  table td:empty {
	background: #fff;
	}
  table td: empty:before {
	color: red;
	content: "empty";
	}

 

 

戻るボタン