CSSの優先順位？詳細度が原因かも適用ルール解説

CSSを勉強し始めた人が良く悩むのが、CSSが効かない理由を特定出来ない事です。CSSが効かない時の理由は幾つかありますが、大きな理由の1つに優先順位があり「詳細度」と言います。

ただ単純にclassやid、セレクターなどを正しく使ったからといって上手く適用されるとは限りません。

「詳細度」はCSSの適用ルールの1つで重み付けをするもの。

この重み付けを理解する事で、効率的にスタイルを掛ける事が出来るうえ、CSSが効かない時の原因も特定出来る様になります。

この記事の目次

1 CSSの重みづけをする詳細度とは？
2 まとめ
- 2.1 CSS詳細度の注意点おさらい

CSSの重みづけをする詳細度とは？

CSSのスタイル適用ルールの1つとして「詳細度」があります。
そもそもCSSにはスタイルの適用順があり、知らないと気付かすに全く別の所を上書きしてしまっていたなんて事が起きてしまいます。

CSSの詳細度とは？: 詳細度は CSSの宣言が適用される際の重みづけの事。セレクターの種類と数で決まります。同じ詳細度であれば通常通り最後に宣言されたものが要素に適用されます。

詳細度を決めるルールは？

セレクター毎に重み付けをするためのスコアが設定されています。詳細度は4 つの異なる値（「1000の位」「100の位」「10の位」「1の位」）に対してセレクターの数だけスコアが加算されていきます。

style属性。HTMLのタグ内にstyle属を書く為セレクターがありません。なので常にスコア「1000」です。
ID セレクターは「100」がスコアされます。
CSSファイル内のクラスセレクター・属性セレクター・擬似クラスは、「10」がスコアされます。
CSSファイル内の要素セレクターまたは疑似要素には、「1」がスコアされます。

style属性は「1000」という考えは古いから違うんだっていう意見もありますが、それは本質ではありません。学術研究ではありませんので、詳細度の理解を助けるという意味では今も十分有効な考え方です。

大事な事は、直接HTML内に記述してあったり、よりピンポイントな指定程スコアが高くなるという事。また、セレクターが複数指定してあればその分スコアが加算されていきます。

**例）セレクターの詳細度スコア表**
セレクター	1000	100	10	1	詳細度の合計
*　全称セレクタ	0	0	0	0	0000
h1　要素セレクター	0	0	0	1	0001
p::first-letter　要素と疑似要素	0	0	0	2	0002
li:hover　要素と疑似クラス	0	0	1	1	0011
.sample　クラス	0	0	1	0	0010
#identifier　id	0	1	0	0	0100
style属性	1	0	0	0	1000

CSSファイル以外にもCSSを書けるの？

通常CSSは専用のファイルを作ってそのファイル内でスタイルを書きますが、HTML側に直接CSSを指定したりファイルを複数読み込ませる事も出来ます。

CSSの各指定方法は以下、

CSSファイル内にスタイルを記述
HTMLのheadタグ内にCSSファイルを読み込ませる
HTMLの要素内に直接スタイルを記述
詳細度関係なく上書きする記述

色々な所にCSSを書く事が悪であるとは言いませんが、詳細度が変わり「思いがけずCSSが効かない」って時の理由だったりします。

① CSSファイル内でのスタイル記述とルール

CSSファイル内にスタイルを書く際の基本ルールとして、同じ要素に対して先に指定したスタイルが後から指定したスタイルで上書きされます。

図解：CSSの宣言上書きルール — **CSSファイル内での要素の宣言上書きルール**

② HTMLのheadタグ内にファイルを読み込み

CSSファイル内の書き方と同じく、CSSファイルの読み込み順（上から下へ）によってもスタイル適用が変わります。

<link rel="stylesheet" href="https://fueru.info/style01.css" type="text/css" media="all">
<link rel="stylesheet" href="https://fueru.info/style02.css" type="text/css" media="all">

style01.cssと同じ要素へのスタイル指定の場合、後から書いたstyle02.cssで上書きされます。