セレクタのネスト戦略を“構造から理解して、破綻しない CSS を書く”
セレクタのネスト（入れ子構造）は、CSS 設計の中でも 「読みやすさ」と「保守性」を大きく左右する重要テーマ」です。
初心者がここを理解すると、CSS が驚くほど整理され、Tailwind CSS でも「ネストの代わりにどう書くか」が自然に分かるようになります。
ここでは、CSS と Tailwind の両方で、実務レベルのネスト戦略をかみ砕いて解説します。
ネスト戦略とは何か
ネストは「親子関係を使ってスタイルを限定する」技術
.card p {
color: #333;
}
これは「.card の中の p だけ」にスタイルを当てるネストです。
ネストを使う目的は次の2つ。
- スコープ（適用範囲）を限定する
- 読みやすく、意図が伝わる CSS にする
ただし、やりすぎると CSS が複雑化し、詳細度が暴走します。
CSS のネスト戦略：基本パターン
パターン1：1階層だけのネスト（最も安全）
CSS版
.card p {
margin-bottom: 12px;
}
HTML
<div class="card">
<p>本文</p>
<p>本文2</p>
</div>
1階層のネストは読みやすく、詳細度も低く、最も安全な書き方です。
パターン2：コンポーネント内の要素を限定する
CSS版
.card .title {
font-size: 20px;
font-weight: bold;
}
.card .text {
color: #555;
}
HTML
<div class="card">
<h3 class="title">タイトル</h3>
<p class="text">本文</p>
</div>
「コンポーネント名 + 子要素のクラス」という構造は、BEM に近く、実務で非常に使いやすい。
パターン3：状態クラスをネストで表現する
CSS版
.tab.is-active .tab-label {
color: #3182ce;
font-weight: bold;
}
HTML
<div class="tab is-active">
<span class="tab-label">タブ1</span>
</div>
状態（active / disabled）を親に持たせ、
子要素の見た目を変えるパターンです。
Tailwind CSS のネスト戦略
Tailwind は CSS のネストを使わない 代わりに、
「ユーティリティクラスを直接 HTML に書く」ことで同じ効果を実現します。
パターン1：親のクラスで子要素をスタイルする（任意バリアント）
CSS の .card p を Tailwind で書く
<div class="card [&>p]:mb-3">
<p>本文</p>
<p>本文2</p>
</div>
[&>p]:mb-3 は
「この要素の直下の p に margin-bottom を付ける」
という意味です。
Tailwind のネストは CSS のネストを HTML 側に移したものと考えると理解しやすい。
パターン2：状態クラスを使う
CSS の .tab.is-active .tab-label を Tailwind で書く
<div
class="tab is-active
[&.is-active>.tab-label]:text-blue-600
[&.is-active>.tab-label]:font-bold"
>
<span class="tab-label">タブ1</span>
</div>
Tailwind の任意バリアントは
「親の状態に応じて子要素を変える」
という CSS のネストをそのまま再現できます。
パターン3：コンポーネント化（@apply）
Tailwind では、複雑なネストを避けるために
@apply を使ってコンポーネント化することも多い。
.card {
@apply p-5 bg-white rounded-xl;
}
.card-title {
@apply text-xl font-bold;
}
.card-text {
@apply text-gray-600;
}
HTML
<div class="card">
<h3 class="card-title">タイトル</h3>
<p class="card-text">本文</p>
</div>
ネスト戦略の“深掘りポイント”
1. ネストは深くするほど危険
悪い例（詳細度が暴走）
.card .content .text p span {
color: red;
}
これは 後から上書きがほぼ不可能になります。
ネストは 2階層までに抑えるのが実務の鉄則。
2. ネストは「構造」ではなく「意味」で行う
悪い例（構造依存）
.card > div > p {
color: #333;
}
HTML が少し変わるだけで壊れる。
良い例（意味ベース）
.card .text {
color: #333;
}
意味（text）に基づくネストは壊れにくい。
3. Tailwind は「ネストしない設計」が基本
Tailwind の思想はこうです。
- CSS のネストは複雑化の原因
- HTML にユーティリティを積む方が安全
- 必要なときだけ任意バリアントでネストを再現
Tailwind を使うと、自然と「壊れにくい CSS 設計」になります。
例題：カードコンポーネントをネスト戦略で設計する
CSS版
.card {
padding: 20px;
background: white;
border-radius: 10px;
}
.card .title {
font-size: 20px;
font-weight: bold;
}
.card .text {
color: #555;
}
.card.is-active .title {
color: #3182ce;
}
HTML
<div class="card is-active">
<h3 class="title">タイトル</h3>
<p class="text">本文</p>
</div>
Tailwind版
<div
class="p-5 bg-white rounded-xl is-active
[&.is-active>.title]:text-blue-600"
>
<h3 class="title text-xl font-bold">タイトル</h3>
<p class="text text-gray-600">本文</p>
</div>
Tailwind では
「状態に応じて子要素を変える」
というネストを任意バリアントで表現します。
まとめ：ネスト戦略を使いこなすコツ
本質
- ネストは「スコープを限定する」ための技術
- 深すぎるネストは CSS を破壊する
- 意味ベースのネストは壊れにくい
実務でのポイント
- ネストは 1〜2 階層まで
- 状態（active / disabled）は親に持たせる
- 子要素はクラス名で意味を持たせる
Tailwind の考え方
- 基本はネストしない
- 必要なときだけ任意バリアントで再現
- @apply でコンポーネント化も可能
