web制作をしていく上で、単純に見た目を整えるだけではなく、保守運用にも適したコードを書く必要があります。
「スタイルが反映されていない！」
「デベロッパーツールで確認したら、後から書いたCSSが横線で消されている！」
CSSを書いていくと、そんな経験をする事が出てくると思います。
それはCSSの詳細度という仕組みがあるからです。
ここではCSSの「詳細度」について紹介します。
CSSの詳細度を学び、綺麗なコードを書けるようになりましょう。
詳細度
CSSは「カスケーディング・スタイルシート」の略ですが、「カスケード」に関する理解が非常に大事になってきます。カスケード(cascade)とは「階段上に連続する滝」という意味です。
スタイルシートのカスケードについては、CSSルールを書く順序が重要です。「等しい詳細度を持つ2つのルールによってスタイルが指定された場合は、CSSの最後にくるものを適用しますよ」というのが「カスケード」です。
詳細度の計算方法
セレクタには詳細度の計算方法があります。例を出して見てみましょう。
例
<div>
<p id="green" class="red">今日は雲ひとつない晴天、清々しい朝です。このような日は、1日の活力を太陽からチャージすることができ、それだけで今日という1日が素晴らしい日になるような、そんな気分になりますね。</p>
<span>-----------------------------------------------</span>
<p class="red">しかし本日、<span>午後から天気は一転、大雨</span>の予報です。</p>
<p> 洗濯物は室内に、傘をお供に外出を。<br>
そして、お早いご帰宅をおすすめいたします。</p>
</div>#green{
color: green;
}
.red{
color: red;
}
p{
color: blue
}
最後にpタグにcolor: blue;を指定したので、pタグ全ての文字色が青になるかと思いきや、前に指定したスタイルが残っているpタグがあります。状況としては、上書きしたはずのスタイルが適用されず、前に指定したものが適用されたままであるということです。これは前にあるルール(プロパティ)の方がより高い詳細度を持っているために起きています。
つまり、「前に指定したセレクタの方が、より具体的・詳細で、要素をスタイリングするべき物だから、前にあるルール(プロパティ)の方が高い詳細度を持っている」とブラウザによって選択されたことから起きたことです。
例として、
idセレクタ > classセレクタ > 要素セレクタ
という順でプロパティの詳細度が高くなっている事がわかります。
では、ブラウザはどのようにして、「セレクタがより具体的・詳細だ」と判断しているのでしょう？
セレクタにはそれぞれ、詳細度を決定するための持ち点があります。
セレクタの持ち点の合計点が、プロパティの詳細度となります。
セレクタごとの持ち点は次の通りです。
| セレクタ | 持ち点 |
|---|---|
| id | 100 |
| class・属性・擬似 | 10 |
| 要素・擬似要素 | 1 |
ユニバーサルセレクタ(全称セレクタ、*)、コンビネーション(+ , > , ~ ,etc...)、否定擬似クラス(:not)は詳細度に影響を及ぼさないため、持ち点は「0」です。
スタイルの指定の仕方で、HTMLにstyle属性(インラインスタイル)を使用する方法があります。インラインスタイルでのスタイル指定の場合、セレクタが無いため、詳細度は「1000」となり、セレクタを用いてのスタイルの上書きはできません。
では、実際にセレクタによる詳細度の合計に応じて適用されるスタイルを考えてみましょう。
例1
まず、先ほどの例で考えてみます。
① #green{
color: green;
}
② .red{
color: red;
}
③ p{
color: blue
}①詳細度：100
②詳細度：10
③詳細度：1
よって、「#green」のid名がついた部分は「.red」のスタイルにも「p」のスタイルにも上書きされません。
例2
<div id="apple" class="a b c d e f g h i j k">
<p>apple</p>
</div>① #apple p{
color: red;
}
② .a .b .c .d .e .f .g .h .i .j .k p{
color: blue;
}この場合、
①100 ＋ 1 → 詳細度：101
②10 × 11 ＋ 1 → 詳細度：111
となるため、②のスタイルが適用されるハズです。
しかしブラウザで確認してみると
①のスタイルが適用されている事が分かります。
これは、セレクタータイプそれぞれに「詳細度のレベル」があり、レベルが低いセレクタで、高いものは上書きできないというルールがあるからです。今回の例をみても「クラスセレクタ」が「idセレクタ」よりも詳細度のレベルが低い事が分かります。つまり仮にクラスセレクタを10万個用意しても、1つのidセレクタのスタイルを上書きすることは出来ないということです。
こういった理由により、「要素セレクタやidセレクタを用いたスタイル指定」は推奨されておらず、「クラスセレクタを用いたスタイル指定」が基本とされています。後からスタイルを上書きしたい場合に狙い通りにスタイルの指定が出来るように、初めから詳細度を均一に保っておきましょう。
!importantの指定
上記で詳細度について解説してきました。
実は上記の計算等をすべて無効にして、強制的にスタイルを適用させることができます。プロパティ値の後に「!important」と記述する事で、最も優先して適用する事ができます。
例
<p id="apple" class="apple" style="color: blue">apple</p>#apple {
color: red;
}
.apple {
color: green !important;
}この例を上記の計算方法で計算すると、style属性(インラインスタイル)にcolor: blueと指定しているので、文字色が青色になると思われますが、クラスセレクタのappleに対してcolor: greenの後に!important;と記述しているため、color: greenが適用されます。
このように、「!important」のキーワードが指定されたスタイルは最優先されます。
しかし、「絶対に必要な場合を除き、あまり使用しないこと」が推奨されています。あまりにも「!important」を使いすぎることで、どれが本当に「important」なのかわからなくなってしまい、開発して行く上で困難な状況を作り出しかねません。
