CSSの詳細度（優先順位）

📝 問題の再掲

Q50: 複数のセレクタが同じ要素に適用されるとき、優先されるのはどれ？

正答: id セレクタ > class セレクタ > タグセレクタ

⚠️ よくある間違い

「後に書いた方が勝つ」と思いがちですが、それは詳細度が同じ場合のみです。詳細度が違えば、書く順番に関係なく詳細度の高い方が優先されます。

📖 段階的な説明

ステップ1：点数制で考える

• id セレクタ（#）: 100点
• class セレクタ（.）: 10点
• タグセレクタ: 1点

ステップ2：計算してみよう

p           → 1点（タグ1つ）
.title      → 10点（class1つ）
#header     → 100点（id1つ）
p.title     → 11点（タグ1 + class1）
#header .title p → 111点（id1 + class1 + タグ1）

ステップ3：同じ詳細度なら後に書いた方が勝つ

.title { color: red; }   /* 10点 */
.title { color: blue; }  /* 10点 → 同じなので後が勝つ → 青 */

ステップ4：!important は最強（でも使わない）

!important はすべてに優先しますが、乱用するとCSSが管理不能になります。基本的に使わないようにしましょう。

💻 コード例

/* 同じ要素に複数のスタイルが当たる場合 */
p { color: black; }           /* 1点 */
.highlight { color: yellow; } /* 10点 → こちらが勝つ */
#main { color: red; }         /* 100点 → こちらが最優先 */

/* 結果: id が指定されていれば赤、なければ class の黄色 */

🔗 関連知識

• 開発者ツールで要素を選択すると、適用されているスタイルと打ち消されたスタイルが表示されます
• インラインスタイル（style属性）は 1000点相当で、id よりも強いです

✅ 確認問題

Q: 以下のCSSで <p class="text" id="intro"> の文字色は何色？

#intro { color: green; }
.text { color: red; }
p { color: blue; }