CSSセレクタの特殊性を簡単に計算する方法

CSSを書いていて、プロパティを指定したのに表示に反映されなくて困るときがあります。そんなときの確認に役に立ちそうなのが、CSSの「Specificity (特定 / 特殊性?)」の計算方法。Nettuts+というサイトで紹介されました。

指定するセレクタ別にポイントをあたえて計算するシンプルな方法で、各指定方法に以下のようにポイントを付与する:

  • HTML要素に1ポイント 例) p
  • classセレクターに10ポイント 例) .pdf-link
  • IDセレクタに100ポイント 例) #content

これらすべてのポイントを足して、多い方の指定が優先される。

たとえば、以下の場合は
#content p .pdf-link 100 + 1 + 10 = 111ポイント

英語ですが、以下の動画で見ると分かりやすい。

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です