中身がない要素をCSSで判別して制御しよう

こんにちわこんばんわ、ちばです。

最近少し涼しくなってきましたが、みなさん風邪など引いていないですか?
私は道産子なので氷点下でも耐えれる作りなので東京はまだ暖かく感じます。

そんな私は先日WordPressの組み込みの案件に携わっていたのですが、PHPは強い方ではなくむしろ弱いくらいです。
フィールドの中身が空の時に親となる要素を非表示にしたいなーと思っていろいろ調べてたらCSSで実現出来たので紹介します。

:empty

PHPなどにもあるemptyと同じで、中身が空の場合にスタイルを当てることが出来ます。

下記サンプルになります。

liタグの中身がない場合のみ :empty で背景色を変えています。

これを応用すればカスタムフィールドで画像などを出力する際に、
フィールドの値が空ならば出力されないので親の要素を非表示にしたりなども出来ますね。

まとめ

CSS3疑似セレクタが増えて私も使いきれてないものも多いです。

今回はメモ的な意味も兼ねてますが、セレクタで有用なものなど使ってみて当ブログでも書いていければなーとは思います。

またこのセレクタはこういう場面で便利!というのがあれば是非教えてください。

Writer

ちば

北海道から上京してきました。
コーダー歴二年目入りましたヽ(゚∀。)ノ

Contact

ご提案依頼、ご相談、お見積もりなど
お気軽にお問合わせください。

03-6403-3259

平日 10:00~19:00

「Web制作について」とお伝え頂ければ
担当者に取次させていただきます。

Mailform

contact@trym.jp
でも受け付けております。