Specificityについてのメモ

世の中何がいけないって、それはあれであります、焦った環境で仕事をすることです。

と、いうわけでこないだとても嫌な汗が出まくった上に、持病の難聴もなんとなく悪化するようでもあり、かつ、途中からあまりに大変すぎて脳さんのほうが自動的にお薬を放出して短時間の間にとてもハッピーな気持ちになったりメロウな気持ちになったりした、そんな切なさ100%なお仕事がありました。

そのときに悩む私をますます悩ませていたのが、そう! CSSセレクタにおける、"Specificity"(特殊性)という、全くもってこにくたらしいあいつであります!!
スタイルシートをぽちぽち書いてるときに、こいつほど存在が忘れられがちで、かつ重要な方なんて、まぁ、他にもいるかもしれないけど、なかなか無いです。とにかくなにがいけないって影が薄いんですよ、影が…。

たとえばここに、unko という id がついた div タグがあるとして、そのなかに niou という class のついた h1 があるとしましょう。

#unko h1 {color:#f00;/*真っ赤!*/}
h1.niou {color:#00f;/*真っ青!*/}

という順番でスタイルを書いたら、実際 h1 の中にあるテキストは何色になると思いますか?。僕も含めて、世のスタイルシートに関する小さいけれど大きな嘘に骨までやられてしまっている人々にとって、「スタイルの指定は後からでてきた奴で前のを上書き!。これだけ!。男の一本勝負!」というのが黄金色のルール。そんな黄金ルールに基づけば、結果は真っ青になるはずでありますね。

ところがどっこい、真っ青になるのはテキストではなくてまさしく俺ら!。コンピュータの掌の上で踊らされる浅はかな愚衆といったところでございましょうか。そうです、結果はまったくもって赤となります。

これには、スタイルシートセレクタ(スタイルを適用したいエレメントを選ぶしくみ)に潜む"Specificity"がねっとり深く、絡んでいるわけなのです。

世界にその名の轟く標準伝道師の Eric Meyer さんの名著"Cascading Style Sheets: The Definitive Guide"によりますとこうあります。

Specificityはさまざまなセレクタの相対的な重みづけをする。シンプルセレクタ(たとえば、H1) は1、クラスセレクタ(たとえば、H1.niou)は10、そしてIDセレクタ(div#unko)は100。したがって、以下のようになる。
H1 {color: red;} /* specificity = 1 */
P EM {color: purple;} /* specificity = 2 */
.grape {color: purple;} /* specificity = 10 */
P.bright {color: yellow;} /* specificity = 11 */
P.bright EM.dark {color: brown;} /* specificity = 22 */
#id216 {color: blue;} /* specificity = 100 */

だそうですよ!!。いや〜。勉強になります…。これで何度やられたことか。わかっちゃいるけど、なぜか忘れてしまうんですよね。ですよね、なんていって僕だけですかね。切ないですね。そんなわけなので、最初の例をいろいろいじってみますと、

#unko h1 {color:#f00;/*真っ赤!*/}
#unko h1.niou {	color:#00f;/*真っ青!*/}

もちろんこうすると、101点と111点で、青くなりますね。

#unko h1 {color:#f00;/*真っ赤!*/}
h1#niou {color:#00f;/*真っ青!*}/

HTMLのタグの方も変えてこのようにしてみると両方101点なので、後に出てきた方が優先で青。

#unko h1 {color:#f00;/*真っ赤!*/}
#niou {color:#00f;/*真っ青!*/}

ところがどっこい、こうしてしまうと、下が100点になってしまうので、赤。

というようなわけで、結構奥が深いというか、深いとかいう前に、なんかちょっとわかりにぐぐね゛?。な〜んて軽く思ったりとかしながら、まぁ、覚えてしまえばそれまででございますね。問題は、せっぱつまってきて、CSS ファイルも複数枚になってきて、だんだん書き方も適当になってきたときに、思い出せるか否かと、いったところでございましょうか…。いやいやほんとに、やられるんですよ、これは…。