Tailwind CSS 実務テクニック集｜CSSを一行も書かずに子要素を操る「arbitrary selector」完全ガイド

こんにちは、フロントエンドエンジニアのあおきです。
実務で役立つ Tailwind CSSのテクニック をシリーズ形式で紹介しています。
第2回の今回は、「CSSファイルを開かずに、複雑なセレクタ指定を完結させる裏技」 についてです。

Tailwind CSSを使っていて、「親要素のクラスから、特定の子要素だけにスタイルを当てたい」と思ったことはありませんか？
通常ならCSSファイルに .parent > img { 〇〇 } と書く場面ですが、Tailwindの arbitrary selector（任意セレクタ） を使えば、HTMLのクラス名の中に直接セレクタを書き込めます。
一言でいうと、「CSSファイルを開かずに、複雑なセレクタ指定を完結させる裏技」です。

arbitrary selector の基本：3つのパーツで理解する

書き方は非常にシンプルで、[]（ブラケット）の中にセレクタを記述します。
構文： [&セレクタ]:適用したいクラス
これを分解すると、以下の3つの役割に分かれます。

• []（ブラケット）： 「ここから先は、Tailwindにない自由な指定を書くよ！」という合図。
• &（アンパサンド）： 「このクラスを書いている要素自身」を指します。
• :（コロン）： 左側に「条件（セレクタ）」、右側に「実際に当てたいTailwindのクラス」を書きます。

【比較】CSS vs arbitrary selector

「直下のimg要素を角丸にする」という指定で比較してみましょう。

従来のCSS

.parent > img { border-radius: 0.5rem; }

arbitrary selector

<div class="[&>img]:rounded-lg">
  <img src="example.jpg" />
</div>

実務で使える！厳選テクニック 5選

「これいつ使うの？」という悩みを解決する、現場で頻出のパターンを紹介します。

① 最初以外に余白を付ける（隣接セレクタ）

② 子要素のリンクをまとめて装飾（子孫セレクタ）

③ CMS記事スタイル（リッチエディタ対策）

④ 直下の子要素だけを操作

⑤ カードUI（ホバーで中身を動かす）

【保存版】よく使う arbitrary selector 一覧

実務で「あれ、どう書くんだっけ？」となったらここを見てください。

CSS 0行でここまでできる！arbitrary selector ライブプレビュー

「これまでに紹介した5つの挙動を1つのデモにまとめました。右下の『Edit on CodePen』からコードをいじって、数値を変えて試してみてください！」

See the Pen Tailwind CSS 実務テクニック集｜arbitrary selector 活用デモ by あおき (@himlinfq-the-encoder) on CodePen.

*使用上の注意点
便利すぎて使いすぎるとHTMLが読みづらくなるので、共通パーツはコンポーネント化するのがコツです

まとめ：なぜこれを使うのか？

最大のメリットは、「スタイルの定義が1箇所で完結する」ことです。

HTMLとCSSファイルを行ったり来たりする必要がなくなり、コンポーネントの修正が劇的に速くなります。「わざわざCSSを書くほどでもないけど、少し特殊な指定がしたい」という時に、ぜひこの強力な武器を活用してみてください。