CSS（カスケーディング・スタイル・シート）は、もはやWebページのデザインに必須になりました（今さらですが）。何事も極端を好む私は、デザイン的な要素はすべてCSSでやってやろうと目論んでいます。また、プログラミング的な要素も好む私としては、できるだけ重複する指定は避けて、共通化できる部分はできるだけ共通化しようとも目論んでいます。そうするとはまるのが、「適用優先順位」というやつです。
まぁ、こういう言葉が実際にあるかはわかりませんが、同じスタイルの指定が適用されたとき、どの指定を優先するかという話です。たとえば、幅や高さを共通で持つ要素があって、枠の色だけを変えていきたいという場合、共通部分は以下のように書いておくとします。
div.default
{
width: 100px;
height: 50px;
border: 1px solid black;
}
これをdiv要素に適用する場合には、こんなふうに書けばいいわけです。幅100ピクセル、高さ50ピクセル、枠線は黒い幅1ピクセルの実線というようになります。
<div class="default">
………
</div>
これに加えて、別のdiv要素を並べるとき、枠の色だけを赤に変えたいとします。このとき、新しくスタイル設定を設けます。div.redframeの下に追加します。
div.default
{
width: 100px;
height: 50px;
border: 1px solid black;
}
div.redframe
{
border-color: red;
}
div要素のclass属性はこんな感じになります。
<div class="default redframe">
………
</div>
さてここで問題です。このclass属性にある2つのクラス名の順番を逆にしたらどうなるでしょうか？
<div class="redframe default">
………
</div>
答え:defaultがあとから適用されるので、枠は黒いままである。
ブーッ！これは間違いです。実は、class属性の値に書くクラス名の順番は、まったく適用順に影響しません。ですから、思い立った順に書いてよいのです。
ではもう一つ問題です。div.defaultとdiv.redframeの順番を変えたらどうなるでしょうか？
div.redframe
{
border-color: red;
}
div.default
{
width: 100px;
height: 50px;
border: 1px solid black;
}
答え：defaultがあとから適用されるので、枠は黒くなる。
ピンポーン！正解です。つまり、実際のスタイル定義の順番が、いつでも優先順位に効いてくる、ということになります。ですから、上乗せして効かせたいスタイルは、必ずあとの方で定義する必要があります。
最後の問題です。これまでのものを少し変えて、こんなふうに書いてみたら、どうなるでしょうか？
div.default
{
width: 100px;
height: 50px;
border: 1px solid black;
}
.redframe
{
border-color: red;
}
<div class="redframe default">
………
</div>
答え：枠は赤くなる。
大ブー！2番目のスタイル定義からセレクタ「div」が落ちていることに注意して下さい。これはつまり、defaultの方にはセレクタ指定があって、redframeの方にはセレクタ指定がありません。こう言う場合、セレクタ指定がある方が優先されます。赤くしたいと思ってredframeをあとに書いても、実際の適用はdefaultが優先される、というわけです。
よく考えれば理屈に合っていて、より対象の狭いものほど優先度を上げてもらわないと、実用的にはならないんですね。これって意外とはまります（実際にはまりました）。
ということで、奥深いスタイルシートの森に一歩を踏み込んでしまった感じですが、この奥深い森にはまだまだいろんな果実が見つかりそうです。