: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";
}