セレクタの詳細度（Specificity）を“感覚で理解する”ための実践ガイド
CSS の詳細度（specificity）は、
「どのスタイルが勝つか」 を決める CSS のルールです。
初心者がここを理解すると、
「なんでこの CSS が効かないの？」という悩みが一気に減ります。
Tailwind CSS を使う場合も、詳細度の考え方を知っておくと、
クラスの競合を避ける設計が自然にできるようになります。
ここでは、CSS と Tailwind の両方で、
実務レベルの考え方をかみ砕いて解説します。
CSS の詳細度とは何か
詳細度は「強さ」を表す数値のようなもの
CSS には、同じプロパティが複数のセレクタで指定された場合、
どれが優先されるか を決めるルールがあります。
ざっくり言うと、強さは次の順番です。
ID > クラス > 要素（タグ）
具体的にはこう。
#id→ とても強い.class→ 中くらいdivやp→ 弱い
深掘り：詳細度は「足し算」される
例えば…
.card .title { … }
これは「クラス + クラス」で、
要素セレクタより強くなります。
詳細度の具体例で理解する
例：どっちが勝つ？
p {
color: black;
}
.text-red {
color: red;
}
HTML
<p class="text-red">テキスト</p>
→ 赤になる
理由.text-red（クラス）の方が p（要素）より強いから。
例：ID があるとどうなる？
#main {
color: blue;
}
.text-red {
color: red;
}
HTML
<p id="main" class="text-red">テキスト</p>
→ 青になる
理由
ID はクラスより圧倒的に強い。
Tailwind CSS の場合の詳細度
Tailwind は基本的に すべてクラス なので、
詳細度はほぼ横並びです。
<p class="text-red-500 text-blue-500">テキスト</p>
→ 後に書いた方が勝つ（text-blue-500）
Tailwind は「後勝ち（後から書いたクラスが優先）」という
とてもシンプルなルールで動きます。
よく使う詳細度の実践パターン
パターン1：要素セレクタをベースに、クラスで上書きする
CSS版
p {
font-size: 16px;
}
.lead {
font-size: 20px;
}
HTML
<p>通常の段落</p>
<p class="lead">大きめの段落</p>
→ .lead が勝つ
Tailwind版
<p class="text-base">通常の段落</p>
<p class="text-lg">大きめの段落</p>
Tailwind はクラス同士なので単純に後勝ち。
パターン2：複合セレクタで詳細度を上げる
CSS版
.card p {
color: gray;
}
.card .highlight {
color: red;
}
HTML
<div class="card">
<p>通常</p>
<p class="highlight">強調</p>
</div>
→ .card .highlight が勝つ（クラス2つ分の強さ）
Tailwind版
Tailwind は複合セレクタを使わないため、
必要な要素に直接クラスを付ける。
<p class="text-gray-600">通常</p>
<p class="text-red-600">強調</p>
パターン3：詳細度が高すぎると管理が難しくなる
CSS版（悪い例）
#main .content p.highlight {
color: red;
}
これは強すぎて、後から上書きしづらい。
改善案
.highlight {
color: red;
}
Tailwind ではそもそも ID でデザインしないため、
詳細度が暴走する問題が起きにくい。
詳細度の“つまずきポイント”を深掘り
1. 詳細度が高いほど良いわけではない
強いセレクタを使うと、
後から上書きするためにさらに強いセレクタが必要になり、
CSS がどんどん複雑になります。
CSS は「弱いセレクタで書く」方が管理しやすい。
2. !important は最終手段
p {
color: red !important;
}
これは すべての詳細度を無視して勝つ。
便利だが、使いすぎると地獄を見る。
Tailwind では !important を使わずに済むよう設計されている。
3. Tailwind は詳細度の問題をほぼ解消する
Tailwind のクラスはすべて同じ詳細度なので、
- 競合しにくい
- 上書きが簡単
- 設計がシンプル
というメリットがある。
例題で理解を深める
例題：ニュースタイトルの色を上書きしたい
CSS版（悪い例）
.news .title {
color: gray;
}
#main .news .title {
color: blue;
}
→ ID が強すぎて後から変更しづらい
改善版
.news-title {
color: gray;
}
.news-title.is-highlight {
color: blue;
}
HTML
<h3 class="news-title is-highlight">ニュースタイトル</h3>
Tailwind版
<h3 class="text-gray-600 text-blue-600">ニュースタイトル</h3>
Tailwind は後勝ちなのでシンプル。
まとめ：セレクタの詳細度を使いこなすコツ
本質
- 詳細度は「どの CSS が勝つか」を決める強さ
- ID > クラス > 要素 の順で強い
- 強すぎるセレクタは後から上書きしづらい
実務でのポイント
- ベースは弱いセレクタで書く
- 上書きはクラスで行う
- !important は最終手段
- ID でデザインしない（構造用に使う）
Tailwind の強み
- すべてクラスなので詳細度が揃う
- 後勝ちでシンプル
- 競合が起きにくい
