More than 3 years have passed since last update.

リストなどのアイテムが無い時に「ありません」を表示させる

Last updated at 2020-03-05Posted at 2020-03-05

頭にアイテムの無い時の状態を入れておいて、アイテムが追加されたらその表示だけにする。

html

<ul>
  <li>ありません</li>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</li>

css

ul > li:first-child() {
  display: none;
}
ul > li:last-child() {
  display: inherit;
}

アイテム1,2,3があれば、

アイテム1

アイテム2

アイテム3

なければ、

ありません

という表示になる。