CSSスキル - 第8章 Lesson7

空要素のみにスタイルを適応させる方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

空要素のみにスタイルを適応させる方法について、初心者向けに解説しています。
ここでは、仮想のフォーム内容の確認ページに、入力されていない項目の部分を赤く目立たせます。



この動画で学べること

・空要素に対してスタイルをかける方法



空要素に対してスタイルをかける方法

空要素に対してスタイルをかける方法をみていきましょう。
CSS3になって新しく追加された擬似クラスに、:emptyというものがあります。
この擬似クラスを使うと、何も入っていない空要素にスタイルをかけることができます。
これは、例えばお問い合せフォームなどで入力されていない部分の背景の色を変えて、エラーをお知らせするようなときに使われます。
では実際に、その書き方を見てみましょう。
「ご連絡先」の<td>タグが空要素になっているので、そこに背景色を追加していきます。



td:empty {
background-color: tomato;
}



保存してブラウザで見てみましょう。
何も入力していない部分だけ、背景色が赤色になりました。
この擬似クラスはとても便利ですが、CSS3になって新しく追加されたものなので、対応しているブラウザとしていないブラウザがありますので、使用する際は気をつけてください。