はじめに
「スタイルが反映されていない！」
「デベロッパーツールで確認したら、後から書いたCSSが横線で消されている！」
CSSを書いていくと、そんな経験をする事が出てくると思います。 それはCSSの詳細度という仕組みがあるからです。
ここではCSSの「詳細度」について紹介します。
CSSの詳細度を学び、綺麗なコードを書けるようになりましょう。
- CSSの詳細度とはなにか
- どのように記述したCSSが優先されるか
同じ種類のセレクタであれば、下に書いた方が強い
CSSは「カスケーディング・スタイルシート」の略ですが、「カスケード」に関する理解が非常に大事になってきます。スタイルシートのカスケードについては、CSSルールを書く順序が重要です。
「等しい詳細度を持つ2つのルールによってスタイルが指定された場合は、CSSの最後にくるものを適用しますよ」というのが「カスケード」です。
つまり、同じ種類のセレクタであれば、基本的に後に書かれたCSSのスタイルが優先されて反映されるようになります。
例えば、以下のコードの場合は、同じtextというクラス名に対して2回スタイルを記述しています。この場合、最初に書いたcolor:red;は上書きされ、最後にくるcolor:blue; が反映されます
<div>
<h2 class="text">本日の天気予報です。</h2>
</div>
.text {
color: red;
}
.text {
color: blue;
}
より詳細度が高い指定方法が優先される
ただし、詳細度がより高い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;を指定しているより前にある書き方のほうがより高い詳細度を持っているためです。
つまりこの例の場合、詳細度は以下の順で高くなります。
高 idセレクタ > classセレクタ > 要素セレクタ 低
そのため、idで指定すると最も優先され、次にクラス名での指定、要素のタグ直接指定が最も詳細度が低いので、優先度も低くなります。 以下が、全体の優先度の違いです。
詳細度を計算する
詳細度は、どのように決まっているのでしょうか。 実は、詳細度は各種類のセレクタ指定が持つ詳細度の点数の合計で決まっています。 それぞれが持っている基本的な点数は以下の通りです。
| セレクタ | 持ち点 |
|---|---|
| id | 100 |
| class・属性・擬似 | 10 |
| 要素・擬似要素 | 1 |
では、実際にセレクタによる詳細度の合計に応じて適用されるスタイルを考えてみましょう。 例 先程の例では、
#green { /* idセレクタ = 詳細度:100 */
color: green;
}
.red { /* classセレクタ = 詳細度:10 */
color: red;
}
p { /* 要素セレクタ = 詳細度:1 */
color: blue;
}よって、最も点数が高いidセレクタである#greenが優先されたことがわかります。
コードを書くときは、「クラスセレクタを用いたスタイル指定」が基本的に推奨されています。
idだと詳細度が高く上書きが難しかったり、逆に要素のタグ指定になると、上書きされやすくなってしまいます。 後からスタイルを上書きしたい場合に狙い通りにスタイルの指定が出来るように、初めから詳細度をできるだけクラス属性で統一しておきましょう。
!importantについて
ここまで詳細度について解説してきましたが、上記の計算等をすべて無効にして、強制的にスタイルを適用させることができます。それが「!important」をつけることです。
プロパティ値の後に「!important」と記述する事で、最も優先して適用する事ができます。
例 ）
<p id="apple" class="apple" style="color: blue">
apple
</p>#apple {
color: red;
}
.apple {
color: green !important;
}
このコードの場合、文字は緑になります。
「!important」のキーワードが指定されたスタイルは最優先されます。
しかし、絶対に必要な場合を除き、あまり使用しないことが推奨されています。
あまりにも多く「!important」を使いすぎてしまうと、どれが本当に「important = 最優先の状態」なのかわからなくなってしまい、開発して行く上で困難な状況を作り出しかねないので注意しましょう。
まとめ
今回は、CSSの詳細度ということについて解説をしました。
以下の要点を押さえておきましょう！
- 基本的には後に書いた方が優先される
- セレクタの種類によって、優先される強さ = 詳細度が変わる
- 基本的にはclassセレクタを使うと良い
適切にCSS詳細度を理解して、スタイルを確実に反映できるようにしていきましょう！
次は、「よく使うCSSのプロパティ」について把握し、CSSプロパティの知識を増やしていきましょう！
