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

• Web Create
• 2016.10.27

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

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

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

:empty

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

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

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

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

まとめ

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

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

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