【フロントエンド学習③】CSSの詳細度について

詳細度とは？

ざっくり説明すると「CSSが適用される優先度」の順序のこと。
詳細度が高い方が優先してCSSが適用される。

そもそもCSSが適用される順序って？

• あるセレクタを同じ方法で指定した場合、CSSは後に書いたものが優先されます。
• 異なる方法で指定した場合、詳細度が高い方が優先されます。

もうちょい詳しく

ここで言う「詳細度が高い」とは

より詳しくセレクタを指定している = 詳細度が高い
言い換えると「より絞ってセレクタを指定している」ほうが詳細度が高い、ということになる。

よくわからないんだけど？

単一の指定方法の場合だと、

1. HTMLタグに「style属性」を用いて記述されたスタイル(てすと3の部分)
2. idを指定して記述されたスタイル(てすと2の部分)
3. classを指定して記述されたスタイル(てすと1の部分)
4. HTMLタグ名を指定して記述されたスタイル(てすと0の部分)
5. 親要素を指定して記述されたスタイル(てすとの部分)

番号の小さい方が詳細度が高くなり、優先的に適用されます。

デモ

See the Pen BaLrwVg by 転職活動中の なーちゃん@Webエンジニアに転職2020 (@tanakatarou590) on CodePen.

複数の方法で指定した場合はどうなる？

結論としては、指定に使われているidやclass等が多い方が詳細度が高い となります。

具体的には、

1. idを使って指定されているスタイル
2. classをより多く使って指定されているスタイル
3. 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」をつけることで強制的に最優先に適用することができます。

ただし、多用すると何が最優先なのかわからなくなる恐れがあるので、
使用するのは非推奨となっているようです。

おわり