この記事は賞味期限切れです。（更新から1年が経過しています）

Quick Tip: Understanding CSS Specificity | Nettuts+

CSSのセレクタがどのように上書きされていくのかを理解する為の、
ポイント制を導入したちょっとしたTipsです。

CSSセレクタの点数計算法

（どうでもいいけどタイポ多くてなごみました。）

CSSのセレクタを次のように計算する考え方ですね。

• HTML要素 : 1点
• クラス : 10点
• ID : 100点

引用元の記事から例を拝借しますが、

#test { background: red; } /* specificity : 100 */
.item p { background: green; } /* specificity : 10 + 1 = 11 */
p { background: orange; } /* specificity : 1  */
body #wrap p { background: yellow; } /* specificity : 1 + 100 + 1 = 102 */

このように計算して点数が高いほうが適用される（であろう）、というわけです。
それぞれのセレクタがどの程度の影響力を持っているか知っていると
コーディングの助けになりそうですね。

---

2010/04/20

上記のリンク先を読むとかいてありますが、
インライン要素は1000点とされているらしいです。

---

他の計算方法

似たような計算方法で、

• a = もしインライン指定ならば1
• b = IDの数
• c = 属性セレクタ/クラス/擬似クラスの数
• d = HTML要素の数

として、

<p style=”color:#000000;”>

a=1, b=0, c=0, d=0 → 1000

“footer nav li:last-child”

a=0, b=0, c=1, d=3 → 0013

“# sidebar input:not([type=”submit”])”

a=0, b=1, c=1, d=1 → 0111

このように点数を作り上げる方法もあるみたいですね。
cf) CSS Specificity And Inheritance – Smashing Magazine

余談

（であろう）とつけておいたのは、
ただ単純に計算式の通りになるというわけではなく、
他の要因も絡んでくるという事。
極端な馬鹿げた例で大変恐縮なのですが

.mylink {
    color:red;
}
body div div div div div div ul li span a {
    color: blue;
}

前者はクラスで10点、後者はHTML要素*11=11点。
ですが、リンクの色は赤になります。（本当に馬鹿げた例だ！）