Tailwind CSSで子孫要素にアクセスする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回はTailwind CSSで子孫要素にアクセスする方法をご紹介します。

なぜ子孫要素にアクセスしたいか
Tailwind CSSでどう実現するか
- 対象の小孫要素を限定したい場合
まとめ
- 参考文献

なぜ子孫要素にアクセスしたいか

冒頭、なぜ子孫要素にアクセスしたいか、その動機について整理します。

例えば、以下のようなUIをTailwind CSSを用いてスタイリングするとします。

この場合、HTMLの構造は次の通りになります。

<div>
  <img alt="..." src="..." />
  <img alt="..." src="..." />
  <img alt="..." src="..." />
  <img alt="..." src="..." />
  <img alt="..." src="..." />
</div>

Tailwind CSSは個別の要素に対してユーティリティクラスを付与することでスタイリングするため、同じスタイルを5つのimg要素に対して繰り返す必要があります。

<div>
  <img class="w-8 aspect-square rounded-full ring-4 ring-white" alt="..." src="..." />
  <img class="w-8 aspect-square rounded-full ring-4 ring-white" alt="..." src="..." />
  <img class="w-8 aspect-square rounded-full ring-4 ring-white" alt="..." src="..." />
  <img class="w-8 aspect-square rounded-full ring-4 ring-white" alt="..." src="..." />
  <img class="w-8 aspect-square rounded-full ring-4 ring-white" alt="..." src="..." />
</div>

ループ処理を用いずにマークアップする際、同じスタイルを重複して記述しなければならず、後から手をいれる時に手間がかかります。

そこで、div > imgのように、親であるdiv要素から子であるimg要素に対してアクセスしたい動機が生じます。

Tailwind CSSでどう実現するか

Tailwind CSSでは*:バリアントを使用すると、子要素・子孫要素にタグ問わずにアクセスできます。

対象	バリアント
子要素のみ	`*:`
子孫要素	`**:`

先の例で*:バリアントを使用すると以下のようになります。

<div class="*:w-8 *:aspect-square *:rounded-full *:ring-4 *:ring-white">
  <img alt="..." src="..." />
  <img alt="..." src="..." />
  <img alt="..." src="..." />
  <img alt="..." src="..." />
  <img alt="..." src="..." />
</div>

対象の小孫要素を限定したい場合

対象の小孫要素を限定したい場合はArbitrary variants（[条件]の構文）を使用します。

例えば、子のimg要素のみに対して適用したい場合は次のようになります。

<div class="[&>img]:w-8 [&>img]:aspect-square [&>img]:rounded-full [&>img]:ring-4 [&>img]:ring-white">
  <img alt="..." src="https://avatar.iran.liara.run/public" />
  <img alt="..." src="https://avatar.iran.liara.run/public" />
  <img alt="..." src="https://avatar.iran.liara.run/public" />
  <img alt="..." src="https://avatar.iran.liara.run/public" />
  <img alt="..." src="https://avatar.iran.liara.run/public" />
</div>