CSSが適用されない時に確認したい CSS適用の優先順位と詳細度の計算方法まとめ

なぜかCSSが効かないことってありますよね。原因はいろいろあると思いますが、この記事ではCSS適用の優先順位と優先度の計算方法をまとめました。

書き間違えてないのに、一部のCSSが適用されていない！なぜだ〜！

ごん先生

あるある！それはCSSの優先順位が原因かもね。

まずはCSS適用の優先順位について、①「CSSの読み込ませ方」による優先順位と②「セレクタ等」の詳細度による優先順位の２つの方法を実証しながら説明します。

CSSが適用される優先順位の原則

h1 {
 color:red;
 color:blue;
}

→後に書いた「青色」が適用される。

原則として、後に書いたスタイルが上書きされて優先されます。

ごん先生

CSSの読み込ませ方については３つの方法があるよね。【１】外部CSSを読み込む方法、【２】エンベッドの指定方法、【３】インラインの指定方法。
忘れてしまった人は前回の記事をぜひ参照してくださいね。

▼CSSの基本や読み込み方法についてはこちら

CSSの読み込ませ方による優先順位は、インラインの指定方法が優先されます。

CSSの読み込ませ方による優先順位
【最優先！】
要素に直接書く<要素 style＝”　”>と書くインラインの指定方法

【★同じ優先度】
・外部CSSを読み込む方法
・<style></style>タグを使うエンベッドの指定方法
同じ優先度→原則通り後に書いた方が優先されます。（実証済み）

▼同じ優先度の時の「書く順番」を変えて実証しました！

★外部CSSのリンクを後に読み込んだ場合→外部CSS（薄紫色）が適用

★<style>タグを後に読み込んだ場合→<style>（黄色）が適用

▼CSSについては、外部CSSの読み込みだけでWeb制作する人が多いですよね。そこでセレクタ等の優先順位が重要になります。

結論：より詳細に限定して指定したものが優先されます。

＊（全称セレクタ、ユニバーサルセレクタ）は全てを意味するセレクタだから、限定されていなくて優先順位が低いんですね。

ごん先生

そうだね。class=”クラス名”は何度も使えるセレクタ。それに対しid=”id名”は１度しか使えず限定されるから、classよりidによる指定の方が優先されるよ。

ちなみに！important とインラインによる指定はセレクタの詳細度ではなく、別のシステムで優先適用されているそうです。

CSSの適用優先度は、どれほど詳しく指定したかによる「詳細度」によって決まります。点数化されており、詳細に書くほど点数が加算されていきます。
ただし、!importantを付けたところは点数を無視して最優先で適用されます。