ログってなんぼ

日々のメモです

空の要素に別のcssを適用する :empty擬似クラス

空の要素に別のcssを適用するメモ

html code

<div class="hoge">contents</div>;
<div class="hoge"></div>;

css code

div.hoge {
  border: 1px solid #000;
  padding: 4px;
  margin: 4px;
}

画面表示

f:id:Okisanjp:20160712184248p:plain

擬似セレクタ :empty 追加

div.hoge {
  border: 1px solid #000;
  padding: 4px;
  margin: 4px;
}
div.hoge:empty {
  display: none;
}

画面表示

f:id:Okisanjp:20160712184254p:plain

要素の中身が空なら最初から要素を配置しなければいいだけの話なんですが、フレームワークなどではViewテンプレートを使うのでhtmlタグは一律に表示されてしまう場合もあるので知っておくと便利。 css3の擬似クラスなのでIE8以前とかは無理かもです