先日webシステムのコーディングをする際に、「ここの要素の中身が空のときにCSSの内容を変えたいんだよなー」と考えることがありました。
jQueryを書けばいいのですがCSS3だけで出来たらいいなー、CSS3の擬似セレクタってなんでも出来そうだし……（雑なイメージ）と思ったので、できるか調べた所「要素が空の時の擬似セレクタ」が二つも見つかったので「要素が空の時の擬似セレクタ」のあれこれのメモ書き記事です。
※このブログ執筆時（2019/09/02）時点での情報です。
Mozilla Developer Centerなどで調べた所、要素が空の時の時のみ適用されるセレクタには「:empty」「:blank」の二種類があると分かりました。
「:empty」は完全に要素の中が空（スペース、改行もない状態）な時のみ適用される（コメントアウトした文字は要素中に入っていても大丈夫なようです）擬似クラスで、
「:blank」はスペースと改行以外の要素がない場合適用される擬似クラスであるという違いがあるそうです。
「:empty」は改行やスペースがあると使えないのか……。ちょっと不便。
少しエンジニアさんに説明するの面倒だし「:blank」使おうかなと思ったのですが、まだ主要ブラウザで未実装なようです。悔しい……。
つまり現在時点では「:empty」を使わざるをえないわけですね。
コメントアウトしている所に何か要素を入れると「:empty」を適用していない下の<div>で括った部分と背景色が同じになります。）
かなり扱いが難しいのでなかなか使いにくいですが、もしCSS3だけで要素の中身が空の時のみCSSの内容を変えたい時は擬似クラス「:empty」を思い出してください。
CSS
0 件のコメント:
コメントを投稿