CSS

:empty, :not擬似クラスを使おう

空の要素を指定できる:empty()と、否定を意味する:not()の使い方について見ていきます。

  • :empty()
  • :not()

:empty()

・空の要素を選択することが出来る:empty擬似クラスについて学んで行きます。

・これは名前の通り要素の中身が空の状態のときにその要素に対してスタイリングをすることが出来る擬似クラスです。

・どのように指定するかというとセレクターの後に:empty{}と書いていきます。例えばliの中も空要素をスタイリングしたい場合はli:empty{}としてあげましょう。

・ただ注意点が何点かあり、半角空白が入っているコンテンツや改行が入っているコンテンツは空の要素とはみなされないのでスタイルは反映されません。

・ただコメントが書かれているコンテンツは空の要素となるのでスタイルは反映されます。

:not()

・否定を意味する擬似クラスも用意されていて:not()を使ってあげましょう。

・これは使い所は限られますが指定の要素の中で〜でないものを指定することができます。

・例えば、liの中で:empty出ないものを指定したかった場合li:not(:empty){}というように書くことで:empty出ない要素を指定することができます。

-広告-

 

 






-CSS