CSS Specificity 計算機（詳細度）
「なんでこっちの CSS が効かないの？」→ セレクタを入力して詳細度を比べてみよう
🏆#header .nav a
(1, 1, 1)
ID, クラス/属性/疑似クラス, 要素/疑似要素
#headerID.navクラスa要素
ID 数: 1 × 100 = 100 クラス・属性・疑似クラス数: 1 × 10 = 10 要素・疑似要素数: 1 × 1 = 1 合計: 111
※ 実際には (1,0,0) は絶対に (0,99,99) に負けません。この数字は概算です。
body .nav a:hover
(0, 2, 2)
ID, クラス/属性/疑似クラス, 要素/疑似要素
:hover疑似クラス.navクラスbody要素a要素
ID 数: 0 × 100 = 0 クラス・属性・疑似クラス数: 2 × 10 = 20 要素・疑似要素数: 2 × 1 = 2 合計: 22
※ 実際には (1,0,0) は絶対に (0,99,99) に負けません。この数字は概算です。
使い方
- 入力欄に比べたい CSS セレクタを入力しよう（例:
#mainvs.nav a） - 右側に (ID, クラス, 要素) の内訳がリアルタイムで表示される
- 🏆 マークがついたセレクタが詳細度の勝者。そちらの CSS が優先される
- プリセットでよくある混乱パターンを体験してみよう