【ホームページ】CSSの適用優先順位とは？

CSS（カスケーディング・スタイル・シート）は、もはやWebページのデザインに必須になりました（今さらですが）。何事も極端を好む私は、デザイン的な要素はすべてCSSでやってやろうと目論んでいます。また、プログラミング的な要素も好む私としては、できるだけ重複する指定は避けて、共通化できる部分はできるだけ共通化しようとも目論んでいます。そうするとはまるのが、「適用優先順位」というやつです。

まぁ、こういう言葉が実際にあるかはわかりませんが、同じスタイルの指定が適用されたとき、どの指定を優先するかという話です。たとえば、幅や高さを共通で持つ要素があって、枠の色だけを変えていきたいという場合、共通部分は以下のように書いておくとします。

これをdiv要素に適用する場合には、こんなふうに書けばいいわけです。幅100ピクセル、高さ50ピクセル、枠線は黒い幅1ピクセルの実線というようになります。

これに加えて、別のdiv要素を並べるとき、枠の色だけを赤に変えたいとします。このとき、新しくスタイル設定を設けます。div.redframeの下に追加します。

div要素のclass属性はこんな感じになります。

さてここで問題です。このclass属性にある2つのクラス名の順番を逆にしたらどうなるでしょうか？

答え:defaultがあとから適用されるので、枠は黒いままである。

ブーッ！これは間違いです。実は、class属性の値に書くクラス名の順番は、まったく適用順に影響しません。ですから、思い立った順に書いてよいのです。

ではもう一つ問題です。div.defaultとdiv.redframeの順番を変えたらどうなるでしょうか？

答え：defaultがあとから適用されるので、枠は黒くなる。

ピンポーン！正解です。つまり、実際のスタイル定義の順番が、いつでも優先順位に効いてくる、ということになります。ですから、上乗せして効かせたいスタイルは、必ずあとの方で定義する必要があります。

最後の問題です。これまでのものを少し変えて、こんなふうに書いてみたら、どうなるでしょうか？

答え：枠は赤くなる。

大ブー！2番目のスタイル定義からセレクタ「div」が落ちていることに注意して下さい。これはつまり、defaultの方にはセレクタ指定があって、redframeの方にはセレクタ指定がありません。こう言う場合、セレクタ指定がある方が優先されます。赤くしたいと思ってredframeをあとに書いても、実際の適用はdefaultが優先される、というわけです。

よく考えれば理屈に合っていて、より対象の狭いものほど優先度を上げてもらわないと、実用的にはならないんですね。これって意外とはまります（実際にはまりました）。

ということで、奥深いスタイルシートの森に一歩を踏み込んでしまった感じですが、この奥深い森にはまだまだいろんな果実が見つかりそうです。