詳細度とは？
ざっくり説明すると「CSSが適用される優先度」の順序のこと。
詳細度が高い方が優先してCSSが適用される。
そもそもCSSが適用される順序って？
- あるセレクタを同じ方法で指定した場合、CSSは後に書いたものが優先されます。
- 異なる方法で指定した場合、詳細度が高い方が優先されます。
もうちょい詳しく
ここで言う「詳細度が高い」とは
より詳しくセレクタを指定している = 詳細度が高い
言い換えると「より絞ってセレクタを指定している」ほうが詳細度が高い、ということになる。
よくわからないんだけど？
単一の指定方法の場合だと、
- HTMLタグに「style属性」を用いて記述されたスタイル(てすと3の部分)
- idを指定して記述されたスタイル(てすと2の部分)
- classを指定して記述されたスタイル(てすと1の部分)
- HTMLタグ名を指定して記述されたスタイル(てすと0の部分)
- 親要素を指定して記述されたスタイル(てすとの部分)
番号の小さい方が詳細度が高くなり、優先的に適用されます。
デモ
See the Pen BaLrwVg by 転職活動中の なーちゃん@Webエンジニアに転職2020 (@tanakatarou590) on CodePen.
複数の方法で指定した場合はどうなる？
結論としては、指定に使われているidやclass等が多い方が詳細度が高いとなります。
具体的には、
- idを使って指定されているスタイル
- classをより多く使って指定されているスタイル
- idやclassが同じ数だった場合、より多くセレクタで指定されているスタイル
こちらも番号の小さい方が詳細度が高くなります。
デモ
See the Pen RwGMjOr by 転職活動中の なーちゃん@Webエンジニアに転職2020 (@tanakatarou590) on CodePen.
上記の1~3が全て同じだった場合、後に書かれたスタイルが適用されます。
例外
style.css
p{color:red;!important}p{color:blue;}上記の例では、通常pタグの内容は青色になるはずですが、
「!important」をつけることで強制的に最優先に適用することができます。
ただし、多用すると何が最優先なのかわからなくなる恐れがあるので、
使用するのは非推奨となっているようです。
おわり