愛と勇気と缶ビール

ふしぎとぼくらはなにをしたらよいか

CSS3ではセレクタの詳細度(specificity)って結局どうなったんだっけ、という話

ホッテントリメーカーでエントリのタイトルを作るのはやめにしました。


今日とある場所で、「CSSセレクタの詳細度について説明して」「私は説明するのが面倒なのであなた自身でGoogle検索してください(実際はもっとアグレッシヴな表現)」というやりとりをした結果、自分が色々気になって調べてしまうという病気が発症した。

CSS2.1における詳細度の計算はおおむね知っていたんだけど、あれーよく考えたらこれってCSS3でも使えるんかいな?CSS3って魑魅魍魎が跳梁跋扈する世界だから詳細度の計算の仕方もズドーン変わってたりするのか?と思って(このように思うこと自体が僕のCSS3に関する理解の浅さを示している)調べた。


調べたところ、「それについては数年前にmalaさんやamachangさんが既に調べて検討していた」という俺あるあるが発動。

http://d.hatena.ne.jp/amachang/20080407/1207594307


この時点ではどうやらstyle属性に書かれたスタイルについてはspecの詳細度の定義からモレていたようだ。

おそらく最新のであろうspecを見ると

http://www.w3.org/TR/css3-selectors/#specificity

Note: CSS2.1のspecをみてちょん と書いてあり、CSS2.1のspecは念のため見ると

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity

こう書いてあるので、つまりstyle属性に書かれたスタイルの扱いについてはCSS2.1と同じだ、と。

(こういうspecってどれが最新 && 正しいのか分かり辛いので、僕が参照しているものが不適切であれば遠慮なくツッコミお願いします。specを検索したら一番イキのいいやつをトップに表示してくれる検索機能をGoogle先生あたりが作ってくれると助かる)


CSS3だからこの辺は特別なんだぜ!みたいのは思ったより少なくて、というかspecを見る限りでは1つしか特例は書いてなくて、どうやら扱いが特殊なのはthe negation pseudo-classだけらしい。

the negation pseudo-classというのはアレです。:not()さんのことです。

http://www.w3.org/TR/css3-selectors/#negation

:not()さんについては、「:not()の中に書かれたセレクタについては他と同じようにカウントし、:not()自体は擬似クラスとしてカウントしない」と書いてありますな。

ほうほう、なるほど。


(あとで検証コードをかく)


CSS3 スタンダード・デザインガイド【改訂第2版】 (Web Designing Books)

CSS3 スタンダード・デザインガイド【改訂第2版】 (Web Designing Books)