ブログ練習帳

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)