こんにちは、Morimotoです。

Webサイトのコーディングをしていると、「最初の要素だけスタイルを変えたい」「最後の要素だけマージンをなくしたい」といったことがありますよね。
CSSでは、このような特定の要素だけスタイルを適用したいときに、:first-child や :last-child といった擬似クラスを使います。

でも、TailwindCSSを使っていると、「どうやってこれらを実装するんだろう？」と迷ってしまう方も多いのではないでしょうか？
しかし、安心してください！TailwindCSSにも、これらの擬似クラスに対応する便利な機能がちゃんと用意されています。

この記事では、TailwindCSSで :first-child, :last-child, :nth-child を使う方法と、実際の活用例を解説していきます。

---

1. :first-child を使って最初の子要素のスタイルを変える

:first-child は、親要素の最初の子要素にスタイルを適用するCSSの擬似クラスです。
TailwindCSSでは、first: というプレフィックス（接頭辞）を使います。

使用例：リストの最初の項目だけ太字にしたい

例えば、以下のようなリストがあったとします。

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>いちご</li>
</ul>

このリストの「りんご」だけ太字にしたい場合、CSSなら以下のように書きます。

li:first-child {
  font-weight: bold;
}

これをTailwindCSSで実装すると、以下のようになります。

<ul>
  <li class="first:font-bold">りんご</li>
  <li>みかん</li>
  <li>いちご</li>
</ul>

first: というプレフィックスの後に、適用したいユーティリティクラス（この場合は font-bold）を記述するだけです。
簡単ですね！

---

2. :last-child を使って最後の子要素のスタイルを変える

:last-child は、親要素の最後の子要素にスタイルを適用します。
TailwindCSSでは、last: というプレフィックスを使います。

使用例：リストの最後の項目の下マージンをなくしたい

リストやカードを並べたときに、最後の要素だけに余分な余白ができてしまうことがあります。この余白をなくしたい場合は、:last-child が便利です。

<div class="space-y-4">
  <p class="mb-4">テキスト1</p>
  <p class="mb-4">テキスト2</p>
  <p class="mb-4">テキスト3</p>
</div>

上記のHTMLでは、.space-y-4 が子要素間に上下のマージンを作っていますが、個別の要素にも mb-4 が付いているので、最後の要素にも下マージンが適用されてしまいます。これを防ぐには、以下のように書きます。

<div class="space-y-4">
  <p class="mb-4">テキスト1</p>
  <p class="mb-4">テキスト2</p>
  <p class="last:mb-0">テキスト3</p>
</div>

last:mb-0 とすることで、「最後の子要素だけは、下マージンを0にする」というスタイルを適用できます。

---

3. :nth-child を使って特定の子要素のスタイルを変える

:nth-child は、1番目、2番目、3番目…といったように、特定の順番の子要素にスタイルを適用します。これを使うと、偶数番目と奇数番目で色を変えるといった、複雑なデザインも簡単に実現できます。

TailwindCSSでは、nth-child() の引数に応じて、以下のようにプレフィックスを使います。

• odd:: 奇数番目の要素に適用（1, 3, 5, …）
• even:: 偶数番目の要素に適用（2, 4, 6, …）
• nth-[n]:: n番目の要素に適用（例：nth-[3]: で3番目の要素に適用）
• nth-[an+b]:: nth-[an+b] のルールに基づいた要素に適用

使用例：リストの偶数行と奇数行で背景色を変える

テーブルやリストで、行ごとに背景色を変えて見やすくするデザインをゼブラストライプと呼びます。これを実現するには、odd: と even: が非常に役立ちます。

<ul>
  <li class="odd:bg-gray-100 even:bg-white p-2">商品A</li>
  <li class="odd:bg-gray-100 even:bg-white p-2">商品B</li>
  <li class="odd:bg-gray-100 even:bg-white p-2">商品C</li>
  <li class="odd:bg-gray-100 even:bg-white p-2">商品D</li>
</ul>

このコードでは、odd:bg-gray-100 で奇数番目の要素に薄いグレーの背景色を、even:bg-white で偶数番目の要素に白い背景色を適用しています。

使用例：特定の順番の子要素のスタイルを変える

:nth-child(n) は、特定の番号の子要素にスタイルを適用したいときに使います。

例：2番目の項目だけスタイルを変える

<ul>
  <li class="p-2">1番目の項目</li>
  <li class="p-2 nth-[2]:font-bold nth-[2]:text-blue-500">2番目の項目</li>
  <li class="p-2">3番目の項目</li>
  <li class="p-2">4番目の項目</li>
</ul>

nth-[2]: プレフィックスを使うと、リストの2番目の要素だけに font-bold と text-blue-500 が適用されます。

例：3つおきにスタイルを変える

:nth-child(3n-1) のように、等差数列のルールを適用することもできます。
これは、1番目、4番目、7番目…のように、特定のパターンでスタイルを適用したい場合に便利です。

<ul>
  <li class="p-2 nth-[3n-1]:text-red-500">1番目の項目</li>
  <li class="p-2">2番目の項目</li>
  <li class="p-2">3番目の項目</li>
  <li class="p-2 nth-[3n-1]:text-red-500">4番目の項目</li>
  <li class="p-2">5番目の項目</li>
  <li class="p-2">6番目の項目</li>
  <li class="p-2 nth-[3n-1]:text-red-500">7番目の項目</li>
  <li class="p-2">8番目の項目</li>
</ul>

nth-[3n-1]: というプレフィックスを使うことで、CSSの :nth-child(3n-1) と同様のスタイルを適用できます。

---

4. PHPのforeachと組み合わせて使う

「CSSを変えたい要素に必要なクラスを自分で付ければ、プレフィックスを使わなくてもスタイリング出来るのでは？」と思った方もいるかもしれません。
確かに自分で偶数番目の背景色を変えたり、最後の要素の余白を変えたり、やろうと思えば出来ちゃいますよね。

要素数の変わらない静的なページであればいいですが、例えばWordPressサイトで投稿一覧を表示させたいなど、動的に表示数が変わるといった場面でTailwindCSSの疑似要素は活用できます。

疑似要素を動的に適用する

PHPの foreach ループと組み合わせることで、動的に生成されるリストやテーブルの各項目に、特定の疑似要素を適用できます。
これは、データベースから取得したデータを表示する際などに非常に便利です。

擬似要素をループ内で使うユースケース

• 偶数行・奇数行で背景色を変える：データの可読性を高めるために、テーブルの行を交互に色分けします。
• 最初と最後の項目に異なるスタイルを適用する：リストの最初だけアイコンをつけたり、最後の項目だけボーダーをなくしたりします。

---

PHPとTailwindCSSを組み合わせたサンプルコード

以下のサンプルコードは、PHPで配列をループ処理し、TailwindCSSのプレフィックスを使って疑似要素を適用する方法を示しています。

1. 偶数・奇数行で背景色を変える

$users という配列にユーザーデータが入っていると仮定します。

<?php
$users = ['Alice', 'Bob', 'Charlie', 'David', 'Eve'];
?>

<ul class="list-none p-0">
    <?php foreach ($users as $index => $user): ?>
        <li class="p-2 even:bg-gray-100 odd:bg-white border-b border-gray-200">
            <?= htmlspecialchars($user) ?>
        </li>
    <?php endforeach; ?>
</ul>

このコードでは、even:bg-gray-100 と odd:bg-white を使用しています。

• even:bg-gray-100: li 要素の偶数番目に背景色 bg-gray-100 を適用します。
• odd:bg-white: li 要素の奇数番目に背景色 bg-white を適用します。

この方法で、データベースから取得したユーザーリストも簡単にゼブラストライプにできます。

---

2. 最初と最後の項目にスタイルを適用する

$products という商品リストがあるとします。最初の項目にボーダーをつけ、最後の項目の下マージンをなくす例です。

<?php
$products = ['MacBook Air', 'iPad Pro', 'Apple Watch', 'AirPods Pro'];
$count = count($products);
?>

<div class="space-y-4">
    <?php foreach ($products as $index => $product): ?>
        <div class="p-4 bg-white shadow rounded-lg 
            first:border-t-4 first:border-blue-500
            last:mb-0">
            <h3 class="font-bold text-lg"><?= htmlspecialchars($product) ?></h3>
            <p class="text-sm text-gray-600">
                <?= htmlspecialchars($product) ?> の説明が入ります。
            </p>
        </div>
    <?php endforeach; ?>
</div>

• first:border-t-4 first:border-blue-500: div 要素の最初の子要素（MacBook Air）の上部に青いボーダーを適用します。
• last:mb-0: div 要素の最後の子要素（AirPods Pro）の下マージン mb-0 を適用し、余分な余白をなくします。

以上の方法で、動的に生成されるリストの見た目を、特定のルールに基づいて簡単に調整できます。

---

まとめ

TailwindCSSでは、CSSの擬似クラスをプレフィックスとして使うことで、特定の条件を満たす要素にスタイルを適用できます。

CSSの擬似クラス	TailwindCSSのプレフィックス	説明
:first-child	first:	最初の子要素に適用
:last-child	last:	最後の子要素に適用
:nth-child(odd)	odd:	奇数番目の子要素に適用
:nth-child(even)	even:	偶数番目の子要素に適用
:nth-child(n)	nth-[n]:	n番目の子要素に適用
:nth-child(an+b)	nth-[an+b]:	算術式に一致する子要素に適用

これらのプレフィックスをマスターすれば、より柔軟で効率的なWebデザインが可能になります。
TailwindCSSを使いこなして、素敵なWebサイトをどんどん作っていきましょう！

それでは。