CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － :nth-child の実践パターン

Web APP CSS
スポンサーリンク

:nth-child を“自在に使いこなす”ための実践パターン集

:nth-child() は CSS の中でも 「繰り返し要素をパターンで選択できる」 とても強力な疑似クラスです。
初心者がここを理解すると、CSS の表現力が一気に広がり、Tailwind CSS でも応用が効くようになります。

ここでは、実務でよく使うパターンを中心に、
CSS と Tailwind の両方でわかりやすく解説します。

:nth-child の基本文法を理解する

CSS の基本形

.item:nth-child(2) {
  color: red;
}
CSS

これは「2番目の .item」にだけスタイルを当てます。

HTML

<div class="item">1番目</div>
<div class="item">2番目（赤）</div>
<div class="item">3番目</div>
HTML

Tailwind での基本形

Tailwind では nth-child を プレフィックス で表現します。

<div class="[&:nth-child(2)]:text-red-500">1番目</div>
<div class="[&:nth-child(2)]:text-red-500">2番目（赤）</div>
<div class="[&:nth-child(2)]:text-red-500">3番目</div>
HTML

Tailwind は nth-child を標準では持たないため、
任意の CSS を適用できる「任意プロパティ構文」 を使います。

:nth-child の“本質”を深掘りする

nth-child は「親の中での順番」で判定される

<div class="box">
  <h3>タイトル</h3>
  <p>段落1</p>
  <p>段落2</p>
</div>
HTML
.box p:nth-child(1) { … }
CSS

これは 効きません。

理由
→ 1番目の子は <h3> であり、<p> ではないから。

nth-child は「タグの種類」ではなく「順番」で判定する
ここが最大のつまずきポイントです。

よく使う nth-child の実践パターン

偶数・奇数をスタイリングする（ストライプデザイン）

CSS版

.row:nth-child(odd) {
  background: #f9f9f9;
}

.row:nth-child(even) {
  background: #efefef;
}
CSS

HTML

<div class="row">1行目</div>
<div class="row">2行目</div>
<div class="row">3行目</div>
HTML

Tailwind版

<div class="row [&:nth-child(odd)]:bg-gray-50 [&:nth-child(even)]:bg-gray-100">
  1行目
</div>
<div class="row [&:nth-child(odd)]:bg-gray-50 [&:nth-child(even)]:bg-gray-100">
  2行目
</div>
<div class="row [&:nth-child(odd)]:bg-gray-50 [&:nth-child(even)]:bg-gray-100">
  3行目
</div>
HTML

3つごとにデザインを変える（グリッドでよく使う）

CSS版

.card:nth-child(3n) {
  margin-right: 0;
}
CSS

これは「3, 6, 9…番目のカード」に適用されます。

Tailwind版

<div class="card [&:nth-child(3n)]:mr-0">カード</div>
HTML

最初の3つだけデザインを変える

CSS版

.item:nth-child(-n + 3) {
  font-weight: bold;
}
CSS

これは「1〜3番目の要素」に適用されます。

Tailwind版

<div class="item [&:nth-child(-n+3)]:font-bold">内容</div>
HTML

2番目だけ特別にデザインする

CSS版

.item:nth-child(2) {
  color: royalblue;
}
CSS

Tailwind版

<div class="item [&:nth-child(2)]:text-blue-600">内容</div>
HTML

nth-child の“つまずきポイント”を深掘り

1. nth-child は「タグの種類」を見ない

<div class="box">
  <h3>タイトル</h3>
  <p>段落1</p>
  <p>段落2</p>
</div>
HTML
.box p:nth-child(1) { … }  /* 効かない */
CSS

nth-child は「1番目の子が p かどうか」を見ている
→ 1番目は h3 なので不一致。

2. nth-of-type と混同しやすい

  • nth-child() → 親の中での順番
  • nth-of-type() → 同じタグの中での順番

例：

p:nth-of-type(1) { … }
CSS

これは「最初の p」に必ず効く。

Tailwind でも同じように使える。

<div class="[&>p:nth-of-type(1)]:text-red-500">
HTML

3. Tailwind では nth-child を「任意プロパティ」で書く

Tailwind の強みは、
CSS の疑似クラスをそのまま書ける柔軟性 にあります。

<div class="[&:nth-child(odd)]:bg-gray-50">
HTML

この構文を覚えると、Tailwind の表現力が一気に広がります。

例題で理解を深める

例題：ニュース一覧で「2番目だけ背景色を変える」

CSS版

.news-item:nth-child(2) {
  background: #f0f8ff;
}
CSS

HTML

<div class="news-item">ニュース1</div>
<div class="news-item">ニュース2（背景色）</div>
<div class="news-item">ニュース3</div>
HTML

Tailwind版

<div class="news-item [&:nth-child(2)]:bg-blue-50">ニュース1</div>
<div class="news-item [&:nth-child(2)]:bg-blue-50">ニュース2（背景色）</div>
<div class="news-item [&:nth-child(2)]:bg-blue-50">ニュース3</div>
HTML

まとめ：:nth-child を使いこなすコツ

本質

  • nth-child は「親の中での順番」で判定される
  • タグの種類は関係ない
  • nth-of-type と混同しないこと

実務での使いどころ

  • テーブルやリストのストライプデザイン
  • グリッドの 3n パターン
  • 最初の数個だけ強調
  • 特定の番号だけデザイン変更

Tailwind の強み

  • nth-child を任意プロパティで柔軟に書ける
  • CSS と同じ感覚で使える
スポンサーリンク
タイトルとURLをコピーしました