ブログ練習帳

CSSのカスケード(2)詳細度の計算

ということで、もっとCSSのカスケード、実験ですう。

今回つかうHTML

<div><div><div><div><div><div><div><div><div><div><div>

<div><p class="p_class">あいうえお</p></div>

</div></div></div></div></div></div></div></div></div></div></div>

CSS No.1

div div div div div div div div div div{
	color:#090;
	background-color:#000;
}
p.p_class{
	color:#F00;
}

上は、すべて1点の要素が10で、10点、下は11点。で、下のあか。

CSS No.2

div div div div div div div div div div div{
	color:#090;
	background-color:#000;
}
p.p_class{
	color:#F00;
}

上は、すべて1点の要素が11個で、11点。下は10+1の11点。単純に足すと同じ11でも、下のあか。この上のほうの11点って、16進法的に言うなら、bと書いたほうがいいのかも。だから、a点と11点で、11点が大きいと。

CSS No.3

div div div div div div div div div div div div p{
	color:#090;
	background-color:#000;
}
p.p_class{
	color:#F00;
}

上は、1点の要素が13個で、13点。でも、これって16進法的にいうならd点。下は、11点。で、下のあか。

CSS No.4

div.c1 div.c2 div.c3 div.c4 div.c5 div.c6 div.c7 div.c8 div.c9 div.c10 div.c11 div.c12 p{
	color:#090;
	background-color:#000;
}
p#p_id{
	color:#F00;
}

上は、クラスが12個あるので、120点。でも、これって、10の桁が12個で16進法的にいうならc点。それに要素が13個あるので、13点だけど、これはd点。だから、ここは133点っていうより、cd点というほうがいいのかな。下は、101点。で、比較の結果、下のあか。

CSS No.5

p#p_id{
	color:#F00;
}


div.c1 div.c2 div.c3 div.c4 div.c5 div.c6 div.c7 div.c8 div.c9 div.c10 div.c11 div.c12 p{
	color:#090;
	background-color:#000;
}

上は、101点。下は、cd点。やはり、上のほうが点数が高い。あか色です。No.4が、あかだったのは、あとから書かれているほうに上書きされたからじゃないようです。

CSS No.6

p#p_id{
	color:#F00;
}

div.c1 div.c2 div.c3 div.c4 div.c5 div.c6 div.c7 div.c8 div.c9 div.c10 div.c11 div.c12 p.p_class{
	color:#090;
	background-color:#000;
}

上は、101点。下は、クラスが13個、要素が13個で、dd点。で、上のあか。

CSS No.7

.p_class {
	color:#f00;
}
div div div div div div div div div div div div {
	color:#090;
	background-color:#000;
}

上は、クラス1つで10点。下は、要素12個で12点だけど、c点。で、上のあか。

CSS No.8

.p_class {
	color:#f00;
}
div div div div div div div div div div div div.c12 {
	color:#090;
	background-color:#000;
}

上は10点。下はクラスが1個で10点、プラス、要素が12個。だから、下は、1c点。ということは、下のほうが点が高い。のに、あれー。上のあかだ。

CSS No.9

.p_class {
	color:#f00;
}
div div div div div div div div div div div div.c12 p{
	color:#090;
	background-color:#000;
}

上は、10点。下は、クラスが1個で10点、プラス、要素が13個。だから、下は、1d点。あれ、今度は、下のみどりになってる。

CSS No.10

div div div div div div div div div div div div.c12 p{
	color:#090;
	background-color:#000;
}

.p_class {
	color:#f00;
}

No.9と詳細度は同じですが、順序を上下逆にしても同じ。あとからきたのが、上書きってわけじゃないみたいだ。

CSS No.11

div div div div div div div div div div div.c12 p{
	color:#090;
	background-color:#000;
}

.p_class {
	color:#f00;
}

今度は、順序はNo.10と同じですが、上のdivを1つ消して、クラスが1個で10点と、要素が12個で、1c点。下はクラス1個で、10点。クラスと要素の数の関係や点数はNo.8と同じなのに、挙動が違う。上のみどりです。

見習い、もう、わかりません。W3Cのサイトも、日本語のページも、ほかの方のサイトも、一生懸命探したけど、これについての記述がどうにも見つかりません。「点数で、10進数に見立てるなら」という部分についての記述は、ところどころに書いてあるのですが、この、最後の部分のNo.8以降のところについては、説明が見つかりませんでした。探し方が、悪いんでしょうか・・・。ただ、ちょっと思ったのですが、今、私が書いたHTMLでいうと、P要素についてのスタイルを決めようとしています。だから、「詳細度」という意味で言うなら、「どれだけくどく書いているのか、特定しようとしている意図が強いのはどれか」ということが「詳細度」と考えると、P要素に言及したセレクタの書き方をしているほうが、詳細度が高いと考えるのでしょうか・・・。はて。

追加　念のため追記ですが、ブラウザによって挙動が違う?と思い、チェックしてみました。IE8と、FireFox5.01で見ましたが、はやり同じです・・・。

2011年11月6日5:32 AM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)

CSSのカスケート(1)スタイルの優先順位

CSSを書くとき、IDとかclassで指定していきますが、思うような動きをしてくれないときがあります。スペルミスとかできちっとCSSが指定できてないってことはないのに、なぜか、うまく反応してくれない・・・。はてー。となります。とりあえず、指定するセレクタを長くしてみると、反応した、っていうこと、結構あって、なぜにぃ～と思います。基本は、後から書いたほうが上書きするとか、クラスやIDに点がついててその足し算したのが、関係してるらしい、ということまではなんとかなったんですが・・・。で、調べなきゃ、永遠に「駆け出し」も「見習い」も取れないよー、と勉強ですぅ。

ということで、前々から気になっていた、本家本元のW3Cのサイトを見てみました。ひぇー、英語じゃん。って当たり前ですね。すんません。翻訳サイトとかも見ながら、英語、読んでみました。

スタイルの優先順位(CSS2.1の場合)

1. ブラウザ＜ユーザー＜製作者＜important付き製作者＜important付きユーザ
2. セレクタの詳細度がより高い方が、詳細度が低いほうを上書きする。
3. セレクタの詳細度が同じ場合、あとからかかれたものが優先される。

詳細度の計算方法は、セレクタを点数付けすする。点数は、style=””で記述した場合、1000点、ID属性ひとつあたり100点、その他の属性および擬似クラスがひとつあたり、10点、要素および擬似要素ひとつあたり1点。これを足し算して、大きいものが優先順位が高くなるということです。

ただ、ここで、気がついたのですが、これを100点、とか、10点とか、考えないほうがいいような気がしてきました。本家サイトによると、style=””で決めたら、A、IDでB、その他の属性等でC、要素等でDとして、それをABCDのように4桁の数字に並べるのだと書いてあるようです。だから、たとえDである要素が10個集まっても、繰り上がってCのクラスと同等になるということではないような・・・。

ということで実験です。

HTMLのソースはこちら

<div id="d_id" class="d_class"><p id="p_id" class="p_class">

あいうえお</p></div>

CSS No.1

p{
	color:#F00;
}

まず、最初、文字が赤いです。

CSS No.2

p{
	color:#F00;
}
p.p_class{
	color:#090;
}

上は、1点、下は1+10で11点。で、下のみどり。

CSS No.3

p.p_class{
	color:#090;
}
p{
	color:#F00;
}

上は、11点、下は1点。で、上のみどり。

CSS No.4

p#p_id{
	color:#090;
}
p{
	color:#F00;
}

上は、101点、下は1点。で、上のみどり。

CSS No.5

p#p_id{
	color:#090;
}
p.p_class{
	color:#F00;
}

上は、101点、下は11点。で、上のみどり。

CSS No.6

p#p_id{
	color:#090;
}
div.d_class p.p_class{
	color:#F00;
}

上は、101点、下は22点。で、上のみどり。

CSS No.7

p#p_id{
	color:#090;
}
div#d_id p.p_class{
	color:#F00;
}

上は、101点、下は112点。で、下のあか。

CSS No.8

p#p_id{
	color:#090;
}
div#d_id .p_class{
	color:#F00;
}

上は、101点、下は111点。で、下のあか。

CSS No.9

p#p_id{
	color:#090;
}
div#d_id p{
	color:#F00;
}

上は、101点、下は102点。で、下のあか。

CSS No.10

div#d_id p{
	color:#F00;
}
p#p_id{
	color:#090;
}

上は、102点、下は101点。で、上のあか。

CSS No.11

div#d_id {
	color:#F00;
}
p#p_id{
	color:#090;
}

上は、101点、下は101点。で、下のみどり。

CSS No.12

#d_id p{
	color:#F00;
}
p#p_id{
	color:#090;
}

上は、101点、下は101点。で、下のみどり。

CSS No.13

div#d_id p{
	color:#F00;
}
p#p_id{
	color:#090;
}

上は、102点、下は101点。で、上のあか。

CSS No.14

div#d_id p{
	color:#F00;
}
div p#p_id{
	color:#090;
}

上は、102点、下は102点。で、下のみどり。

と、いくつも例題をやってみることで、なんとなく、見えてきたような。ということで、こんどは、もっといろいろといてみようと、思う見習いですが・・・。乞うご期待？

2011年11月6日3:37 AM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)