要素の中身が空の時に、スタイルを適応する(:empty)
要素の中身が何もない時だけスタイルを適応したい場合、中身が空なので、何も表示のしようがありません。
ましてや、静的サイトでは永遠に空なので、そんな所にスタイルを適応しようとも思いませんよね?
空の要素にはクラスを指定して、ブロック要素化したりすれば良いだけです。
しかし、少しプログラミングができるようになったり、WordpressなどのCMSを使用している場合には、空の要素を作成する可能性があります。
中身が空の時だけ反応する擬似セレクタ(:empty)
まず、以下のサンプルを見てください。
See the Pen emptyのテスト by Uilou (@uilou754) on CodePen.
基本のスタイルを設定した上で、中に要素がない時(:empty)にはdisplay: none;を設定しています。
.error_msg:empty {
display: none;
}
これは何に役立つかというと、例えばPHPでエラー表示する場合、以下のようにすることが多いと思います。
// $errorにエラーメッセージが入っていれば
if ($error) {
echo "<p class='error_msg'>{$error}</p>";
}
これはエラーがあれば、タグ自体をPHPで表示するということです。
しかし、:emptyを使えば、以下のようにできます。
<!-- エラーメッセージ -->
<p class="error_msg"><?php echo $error; ?></p>
$errorの中身がエラーメッセージだろうと、空っぽだろうと関係なく、出力するだけで良くなり、ifを使用する必要が無くなります。
しかし、:emptyでは、半角スペースなどが入っている場合は、条件に一致しないと判断されてしまい、表示されてしまうので、注意が必要です。
半角スペースを無視する擬似セレクタに:blankがありますが、現在ほとんどのブラウザで対応できていません。
:emptyは擬似要素ではない
:emptyは疑似セレクタであって、擬似要素ではないため、::beforeや::afterのような使い方はできません。
:emptyに擬似要素(:before,::after)のようなスタイルを当てた場合
See the Pen :emptyの擬似要素化サンプル by Uilou (@uilou754) on CodePen.
要素の中身が空っぽの場合、要素の上から半透明の黒いマスクをかけようとしているサンプルです。
同じタグを2つ入れてあり、片方は中身が空ですが、:emptyの場合、その自身がposition:absolute;になっています。
つまり、:emptyにスタイルを当てた場合は、当たり前ですが、中身が空であるその要素自身にスタイルが当たることになります。
:emptyと擬似要素(:before,::after)を組み合わせるとCSSだけで、要素がない時のメッセージを表示できる
:emptyと擬似要素を組み合わせることで、:emptyの時だけ、::beforeと::afterにスタイルを適応することができます。
そうすることで、中身が空の時にだけ表示されるメッセージをCSSだけで実装することができます。
See the Pen :emptyの時に文字を表示する by Uilou (@uilou754) on CodePen.
上記はバスの時刻表のつもりですが、中身が何も入っていない場合には、メッセージを表示するようにしています。
行っていることは非常に単純で、:emptyの要素に対して、::beforeを付けています。
サンプルではSCSSを使用していますが、CSSで表現すると、以下の通りです。
table td:empty::before {
content: 'この時間にバスはありません';
}
まとめ
このように、『中身が何もない時』という状況が想像しにくいかもしれませんが、特定の人には有用な内容じゃないかと思います。
特に、ドラッグ&ドロップエリアや画像アップロードなど、受付状態では空、アップロードされたらファイル名を表示するなどの場合、切り替えを実装しやすく便利な局面があります。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。