REDLINE MAGAZINE | CSSビギナー向け 陥りがちな罠Vol.03

CSSビギナー向け 陥りがちな罠Vol.03

ソースをいじってもまったくスタイルが反映されない！編

cssは基本的には後から読み込んだスタイルを優先的に適用する仕組になっている。が、それには前提があって、スタイルの個別性（特殊性）が同じ場合に後から記述した内容が適用されるというもの。

※ここから先は外部CSSファイルで見栄えを整えているという前提で話を進めます。

継承やカスケーディングという考え方についてはCSSとうまく付き合う予備知識というエントリに書いたとおり。それをさらに掘り下げると上に書いたスタイルの個別性（特殊性）というものにたどり着く。

CSSには指定したスタイルが競合するとどれを優先するのかを、その個別性が高いものを使いますというルールがある。泣く子も黙るWeb標準の教科書を持ってらっしゃる方は122ページ辺りの内容。これ、なんか一見してややこしそうだが、個別性を超簡単にまとめると･･･

個別性の計算方法

「*（全称セレクタ）」は個別性 → 0
「要素」は個別性 → 1
「classや疑似クラス」は個別性 → 10
「id」は個別性 → 100

これを元に個別性がいくらなのかを計算するだけの話。

例えば、『 div#header h1 』の個別性は？
div（要素）が1つ、#header(id)が１つ、h1(要素)が１つ、ということで、要素が２つとidが1つの計算。要素は「1」、idは「100」なので、1+100+1＝102。個別性は102となる。

例えば、『 ul.test li.sample a 』の個別性は？
ul（要素）が1つ、.test(class)が１つ、li（要素）が1つ、.sample(class)が１つ、a（要素）が1つ。1+10+1+10+1＝23。個別性は23となる。

これでどのスタイルを優先させるかを決めている。
ということで、「後から記述した内容が優先されるはずなのに言う事聞かない！」って場合にあれこれソースをいじって反映されない場合は、この個別性（特殊性）を調べてみると解決するかもしれない。

2007年03月20日 23:29 | Red | パーマリンク