CSSを書いていて、プロパティを指定したのに表示に反映されなくて困るときがあります。そんなときの確認に役に立ちそうなのが、CSSの「Specificity (特定 / 特殊性？)」の計算方法。Nettuts+というサイトで紹介されました。
指定するセレクタ別にポイントをあたえて計算するシンプルな方法で、各指定方法に以下のようにポイントを付与する：
- HTML要素に1ポイント 例） p
- classセレクターに10ポイント 例） .pdf-link
- IDセレクタに100ポイント 例） #content
これらすべてのポイントを足して、多い方の指定が優先される。
たとえば、以下の場合は
#content p .pdf-link 100 + 1 + 10 = 111ポイント
英語ですが、以下の動画で見ると分かりやすい。
2010年4月17日に公開され、2017年11月23日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。