はじめに
私はプログラミング初学者である為、間違った記述をしている可能性が高いと思われます。もし、間違いなどがございましたら、ご指摘のほどよろしくお願いします。
CSSの詳細度とは
簡単に説明すると、複数のルールが適用されたときの優先度である。idはclassより優先度が高く、classは何もないものより優先度が高い。
下記の場合、redが適用される
#title{color:red;}.a{color:blue;}h1{color:green;}何故、idがclassよりも優先度が高いのかについてはスコアリングを理解すると良い。
スコアリングの見方について
基本的にはスコアリングというものでCSSの記述が反映され、スコア値として1000,100,10,1がある。
| スコア値 | セレクター |
|---|---|
| 1000 | style属性（インラインスタイル）内にある場合、セレクターがないので常に1000 |
| 100 | 全体のセレクターの内部にあるidセレクター |
| 10 | 全体のセレクターの内部にあるclassセレクター・属性セレクター・擬似クラス |
| 1 | 全体のセレクターの内部にある要素セレクターまたは疑似要素 |
重要なのは、詳細度の合計で表示が決まるのではなく、あくまでもスコア内で同じ点数があるかどうかで決まる、ということである。優先順位としては、1000→100→10→1→詳細度の合計で判断する。
画像内では、3番目は10*2+1*2=22、4番目は100*1=100となっているが、10や1を多用して100を超えたとしても、上記の優先順位により4番目の記述が反映される。
反映される順番としては、1000,100,10,1の順で同じ点数を取っているかどうかで決まる。同じ点数を取っていたら下の方を見て判断して、最終的に全て同じ数であれば詳細度の合計で判断する。
#title{color:green;}.a.b.c.d.e.f.g.h.i.j.k{color:blue;}上記の場合、詳細度の合計値はid指定が100、class指定が110でclass指定の方が反映されると思いきや、先ほど述べたようにスコア内で同じ点数があるかどうかで決まる為、idは100というスコアをもっている為、classの10スコアが組み合わさった110よりも優先順位が上となる。
!importantについて
また、!importantというものがあり、これを使用するとこれまでに述べてきた優先順位に関係なく!importantと書かれているもの表記が優先される。しかし、MDNなどでは使用しないことを強く推奨している為、使用しない方が良いと思われる、、、。
終わりに
初学者ではありますが、少しでもお役に立てれば幸いです。