CSSが適用されない!? – CSSの優先順位

本サイトで配布しているWordPressプラグインEnhancing CSSを使用するとWordPressに外部スタイルシートを適用することが可能ですが、実際にスタイルを適用するには若干のコツが必要です。

詳細度による優先順位

CSS内に記述されたスタイルには詳細度による優先順位という概念があり、スタイル指定が重複した場合は、この詳細度によって適用されるかどうかが決定されます。

詳細度に関する詳細は以下のサイトをどうぞ。

これらを正しく理解すると、ほとんどのケースで外部スタイルシートからスタイルを変更可能です。

importantルールについて

スタイルシートでは、!important という記述を入れることで特定のスタイルを優先させることが可能です。

div {
    font-size: 12px !important;
}

これを上手く利用すれば、外部スタイルシートを追加することによるスタイルの変更がやや簡単になりますが、多用しすぎるとメンテナンス性が悪くなりますので要注意です。

読み込み順による優先順位

詳細度による優先順位が同じであったり、!importantルールが使用されていない要素に対するCSSは、あとから書いたものや読み込んだものが優先して適用されます。

便利なツール

Firefoxの拡張機能「Web Developper」では、マウスオーバーした要素のスタイルがどのCSSからどのように指定されているかを簡単に調べることが可能です。