CSSセレクター実験 | 侍鼬（サムライフェレット）

点数で勝負！

ID vs クラス

ID vs クラスは何色になる？

IDは赤色、クラスは青色を設定。
```
#id001{ color:red; }
.c001{ color:blue; }

<div id="id001" class="c001">
<p><span>僕の名前は山田太郎です。</span></p>
</div>
```
僕の名前は山田太郎です。

当然IDの勝ち。
でも以下のようにクラス配下のp要素を指定すると・・・
```
#id001{ color:red; }
.c002 p{ color:blue; }

<div id="id001" class="c002">
<p><span>僕の名前は山田太郎です。</span></p>
</div>
```
僕の名前は山田太郎です。

クラスの勝ち。
ふ～む、階層の深いものの方が詳細度が高いということになるのか。
単純に計算してidが100点、クラスが10点、要素が1点だとすると、100vs11なのだけど。
では次はクラスをc003を持つdiv。
```
#id001{ color:red; }
div.c003{ color:blue; }

<div id="id001" class="c003">
<p><span>僕の名前は山田太郎です。</span></p>
</div>
```
僕の名前は山田太郎です。

これは想定通り。
同じ階層の勝負だから100vs11でIDの勝ち。
ならばこれ。
```
#id002 p{ color:red; }
.c004 span{ color:blue; }

<div id="id002" class="c004">
<p><span>僕の名前は山田太郎です。</span></p>
</div>
```
僕の名前は山田太郎です。

ふむ、CSSの詳細度はより指定の深いものがまずは優先。深さが同じなら、先ほどの計算式が生きてくるということか。
では階層が同じ指定でも、クラスを10個集めればidと同じ点数になるやりかたのこれならどうだろう？
```
#id003{ color:red;}
.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10{ color:blue; }

<div id="id003" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10">
<p><span>僕の名前は山田太郎です。</span></p>
</div>
```
僕の名前は山田太郎です。

おや？おかしい！
idが1個で100点、クラス1個10点だから10個集めれば100点、CSSの仕組みからするとCSS上あとに記載したものが優先されるはずだが、これはどうみてもIDが優先されているぞ？
ではこれでどうだ！
```
#id003{ color:red;}
div.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10{ color:blue; }

<div id="id003" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10">
<p><span>僕の名前は山田太郎です。</span></p>
</div>
```
僕の名前は山田太郎です。

あかん！
100vs101になったはずなのに、クラスが勝てない！
これはもう、CSS点数制は全く信用ならんということ確定ですな。

点数で勝負！

ID vs クラス