中身がない要素をCSSで判別して制御しよう|Blog|株式会社トライム
中身がない要素をCSSで判別して制御しよう
2016.10.27
![記事サムネイル](https://contents.try-m.co.jp/wp-content/uploads/2016/10/OZPA89_danborukaihusuru_TP_V.jpg)
こんにちわこんばんわ、ちばです。
最近少し涼しくなってきましたが、みなさん風邪など引いていないですか?
私は道産子なので氷点下でも耐えれる作りなので東京はまだ暖かく感じます。
そんな私は先日WordPressの組み込みの案件に携わっていたのですが、PHPは強い方ではなくむしろ弱いくらいです。
フィールドの中身が空の時に親となる要素を非表示にしたいなーと思っていろいろ調べてたらCSSで実現出来たので紹介します。
:empty
PHPなどにもあるemptyと同じで、中身が空の場合にスタイルを当てることが出来ます。
下記サンプルになります。
liタグの中身がない場合のみ :empty で背景色を変えています。
これを応用すればカスタムフィールドで画像などを出力する際に、
フィールドの値が空ならば出力されないので親の要素を非表示にしたりなども出来ますね。
まとめ
CSS3疑似セレクタが増えて私も使いきれてないものも多いです。
今回はメモ的な意味も兼ねてますが、セレクタで有用なものなど使ってみて当ブログでも書いていければなーとは思います。
またこのセレクタはこういう場面で便利!というのがあれば是非教えてください。
Contact
お問い合わせ
トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。
03-6403-3259
受付:10:00 - 19:00
![ロゴ](/wp-content/themes/trym/images/top/contact-logo.png)