classは、複数指定できる

スタイルシートなんて勉強したことないから、以前から気になってたことを実験。
classを複数指定するとどんな風に振舞うのか？

<style>
.red	{color:red;}
.blue	{color:blue;}
.fs200	{font-size:200%;}
.blue.red{color:purple;}
</style>

<div class="red">red</div>
<div class="blue">blue</div>
<div class="fs200">fs200</div>
<div class="red blue">red blue</div>
<div class="fs200 blue">fs200 blue</div>
<div class="blue red">blue red</div>
<div class="fs200 red">fs200 red</div>
<div class="red fs200">red fs200</div>
<div class="blue fs200">blue fs200</div>

<div class="red"><div class="blue">red(blue)</div></div>
<div class="blue"><div class="red">blue(red)</div></div>
<div class="fs200"><div class="red">fs200(red)</div></div>
<div class="red"><div class="fs200">red(fs200)</div></div>

<div class="blue"><div class="red">blue(red)->purple?</div></div>

かぶる設定は、class に後から指定したものが適用されるのではなく、スタイルで後に定義されているものが適用される。

class の入れ子を指定する方法がないか検索中。

.blue.red{color:purple;}

追加(2009/06/03 13:51:53)

<style>
.red	{color:red;}
.blue	{color:blue;}
.blue .red{color:darkslateblue;}
.red .blue{color:darkmagenta;}
</style>

<div class="blue"><div class="red">blue(red)->purple?  (darkslateblue)</div></div>
<div class="red"><div class="blue">red(blue)->purple?  (darkmagenta)</div></div>

空白をあける必要があるんですね。。