CSSの優先度について

何も考えずCSSを書くと、スタイルが適用されないことがたまにあります
下に書いてあるプロパティが優先される、IDの優先度が高いという浅い知識しかないからでしょう

importantを使うことのないように
そしてCSSを嫌いにならないように調べます

基本的な優先順位

下に書いてあるプロパティが優先されます

下記のコードでは「background-color: blue;」が下にあるので背景色が青になっています

See the Pen KKNagQV by nakamura (@nakamura0238) on CodePen.

タイプセレクタ × classセレクタ

classセレクタがあるほうが優先されます

background-color: blue;」が下にあるにも関わらず背景色は赤になっています
同じdivであればclassセレクタがついているほうが優先されます

See the Pen QWGdKVy by nakamura (@nakamura0238) on CodePen.

classセレクタ × idセレクタ

classセレクタよりidセレクタが優先されます

これも「background-color: blue;」が下にあるにも関わらず背景色は赤になっています
idで要素を指定した際は、適用するプロパティを少なくすると混乱しないと思います

See the Pen vYygXVv by nakamura (@nakamura0238) on CodePen.

idセレクタ × style属性

HTMLにstyle属性が指定してある場合はそちらが優先されます

CSSには「background-color: red;」としか書いていないにも関わらず背景色は青です
それはHTML側に書かれているからです
style属性はHTMLも長くなるので使わないようにしています

See the Pen tag&id by nakamura (@nakamura0238) on CodePen.

セレクタの詳細度

セレクタが細かく書かれているほうが優先されます

p.inner」に適用されているものは「background-color: blue;」です
div.boxの中のp.inner」と詳細に書かれているため優先されています

See the Pen selector by nakamura (@nakamura0238) on CodePen.

セレクタの点数があるらしい

どのプロパティが適用されるかはセレクタの点数によって決まるみたいです

セレクタ点数
全称セレクタ0* { color: red; }
要素名1p { color: red; }
疑似要素1p::after { content: “text”; }
疑似クラス10p:hover { color: red; }
class10p.red { color: red; }
id100p#red { color: red; }
style属性1000<p style=”color: red;”>text</p>

加算方式で点数の一番高いプロパティが適用されます
これでCSSへの理解が深まるはずでしょう

まとめ

CSSを書くにあたってあらかじめ自分のルールを決めておくと良さそうです

・セレクタの階層をすべて書く
・idは使わない
・style属性は使わない
・importantは絶対に使わない

など、何かルールを決めることでコーディングも進めやすくなるのではないでしょうか

タイトルとURLをコピーしました