CSSの優先順位について｜クロノドライブ

2010年11月09日

何気なくCSSを記述していて、あるとき途端にCSSが効かなくなったという経験はないでしょうか。スペルなどは間違っていないのに、スタイルが適用されない…という場面も多々あると思われます。実はCSSには優先順位があり、記述の方法によってその優先順位が変動し、順位の高いものが優先的に読み込まれるようになっています。そこで今回は、CSSの優先順位についてご紹介します。

基本的な優先順位について

CSSは、基本的には後に書いたものが優先して読み込まれます。

HTML

1<div class="sampleBox01">
2    <div class="sampleBox02">
3        <p>サンプルテキスト</p>
4    </div>
5<div>

CSS

1.sampleBox01 {
2    color: #999999;
3}
4.sampleBox02 {
5    color: #666666;
6}

上記の例ですと、HTML側でsampleBox02の方が後に書かれているので、この場合のテキストの色は#666666になります。

セレクタの獲得ポイントについて

では、次の例はどうでしょうか。

HTML

1<div id="sampleBox01">
2    <div class="sampleBox02">
3        <p>サンプルテキスト</p>
4    </div>
5</div>

CSS

1#sampleBox01 {
2    color: #999999;
3}
4.sampleBox02 {
5    color: #666666;
6}

上記の例も、sampleBox02の方が後に書かれているからsampleBox02が優先的に読み込まれてテキストの色は#666666になる…というわけではありません。今回の例の場合、sampleBox01がidセレクタによって指定されているため、classセレクタで指定されているsampleBox02よりも優先して読み込まれるようになっています。つまり、今回の例の場合だと、文字色は#999999になるわけです。

セレクタにはそれぞれ優先順位を決めるポイントが設定されており、そのポイントがより多いセレクタのスタイルが優先的に読み込まれるようになっています。その内訳は、

*（全称セレクタ） … 0ポイント
p,h1など（タグセレクタ） … 1ポイント
.sample（classセレクタ） … 10ポイント
#sample（idセレクタ） … 100ポイント

というようになっています。つまり、前記の例で言うと、

#sampleBox01 … 100ポイント
.sampleBox02 … 10ポイント

であるため、idセレクタで指定されているsampleBox01が優先的に読み込まれたわけです。

ポイントは加算式である

また、これらのポイントは加算され、最終的に一番ポイントが多いスタイルが読み込まれるようになっています。つまり、

CSS

1#sampleBox01 {
2    color: #999999;
3}
4#sampleBox01 .sampleText01 {
5    color: #666666;
6}

この場合だと、sampleBox01はidセレクタのみの100ポイントであり、一方sampleText01はidセレクタとclassセレクタのポイントが加算され、110ポイントとなるため、文字色は#666666に指定されます。

!importantについて

プロパティの最後に!importantを記述すると、他のどのセレクタよりも優先度が高くなります。つまり、

CSS

1#sampleBox01 {
2    color: #999999;
3}
4.sampleBox02 {
5    color: #666666!important;
6}

この場合ですと、通常ならばidクラスタのsampleBox01が優先して読み込まれますが、!importantが記述されているため、sampleBox02のcolorが優先して読み込まれます。ハックとして使う場合などに有用です。

複雑な入れ子でHTMLを組んでいると、時にスタイルが適用されない自体になる場合があります。もしそういう事態に直面した場合、このCSSの優先順位を意識してコードを見直してみると、その原因がはっきりするかもしれません。