擬似クラス empty を使ってレイアウトの崩れを防ぐ

この記事はユアマイスター アドベントカレンダー 2022の 6 日目の記事です。

Nuxt3 + Tailwind CSS でコードを書く際に条件付きでレンダリングするコンポーネント周りのレイアウトの崩れを防ぐために empty 擬似クラスを使うと便利だったので備忘録として記事にしました。

empty 擬似クラスとは？

指定した要素が子要素を持っていない場合にスタイルを当てられる擬似クラスです。

:empty は CSS の 擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメント、処理指示、 CSS の content は要素が空であるかどうかの判断には影響しません。

公式ドキュメント

ユースケース

次の例のような、複数のコンポーネントの表示状態が独立に変化するケースです。

<template>
  <section class="space-y-4">
    <div>
      <!-- 何かしらの要素 -->
    </div>
    <div>
      <FooComponent v-if="foo.visible" />
      <BarComponent v-if="bar.visible" />
      <BazComponent v-if="baz.visible" />
    </div>
    <div>
      <!-- 何かしらの要素 -->
    </div>
  </section>
</template>

全てのコンポーネントの条件がfalseの際にコンポーネントは全てレンダリングされないが空の親要素が残ってしまいます。

そうすると、空の div が残ることにより意図しないスペースが入ってしまいます。

このような意図しないスタイルが入ってしまうのを防ぐために empty を使います。

<template>
  <section class="space-y-4">
    <div>
      <!-- 何かしらの要素 -->
    </div>
    <!-- emptyで子要素が存在しないときに非表示にする -->
    <div class="empty:hidden">
      <FooComponent v-if="foo.visible" />
      <BarComponent v-if="bar.visible" />
      <BazComponent v-if="baz.visible" />
    </div>
    <div>
      <!-- 何かしらの要素 -->
    </div>
  </section>
</template>

上記は擬似クラス empty で子要素を持っていない親要素を非表示にしています。

tailwind では要素と要素の間に余白を入れる space や、ボーダーを入れる divide など便利なスタイルが用意されています。

しかし、このような要素間にスタイルを当てるクラスと条件式レンダリング使うと、子要素を持っていない親要素が残っていることによってレイアウトが崩れる場合があります。

empty で子要素がない場合のスタイルを当ててレイアウトの崩れを防ぐことができます。

後書き

擬擬クラス empty を使用してレイアウトの崩れを防ぐ方法を書きました。 CSS にはまだ便利だけどあまり知られていない擬似クラスがあるので勉強していきたいです。