📏

【CSS】優先順位（カスケードと詳細度）を理解する

2024/05/23に公開

CSS

W3C

tech

はじめに

CSSの優先順位、なんとなくは理解しているつもりでした。
しかしstyle属性や!importantによる記述は「詳細度を上げることではない」という点を誤解していたので、仕様について調べてみました。

CSSのカスケード（Cascade）

カスケードのルール

カスケードは、以下のポイントに基づいてスタイルの優先順位を決定します。

https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#9

オリジンと重要度（Origin and Importance）：スタイルがどこから来たか（ブラウザデフォルト、ユーザー定義、作者定義）と!importantが付いているか。
文脈（Context）：メディアクエリや他の条件により適用されるスタイル。
要素に直接付加されたスタイル（Element Attached Styles）：HTML要素のstyle属性で定義されたインラインスタイル。
レイヤー（Layers）：異なるレイヤー間でのスタイルの優先順位。
詳細度（Specificity）：セレクタの具体性に基づくスコア（例：インラインスタイル > IDセレクタ > クラスセレクタ > 要素セレクタ）。
記述順（Order of Appearance）：同じ詳細度の場合、後に書かれたスタイルが優先されます。

https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#10

誤解していたのですが、後述する詳細度による優先順位はカスケードでのステップ上かなり後ろになります。（上図）
つまりstyle属性や!importantによる記述は「詳細度を上げることではない」ということです。

オリジンと重要度（Origin and Importance）

スタイルがどこから来たか、そして!importantが付いているかどうかによって優先順位が変わります。
オリジン内での優先順位は以下のようになっています。

CSS トランジション（Transition declarations）：アニメーションやトランジションの終了時に適用されるスタイル。
ユーザーエージェント（Important user agent declarations）：ブラウザのユーザーエージェント（デフォルトのブラウザスタイルシート）によって、!importantが付けられたスタイル。
ユーザー（Important user declarations）：ユーザーが設定したスタイルシートで、!importantが付けられたスタイル。
開発者（Important author declarations）：ウェブページの作者が設定したスタイルシートで、!importantが付けられたスタイル。
CSS @keyframe アニメーション（Animation declarations）：アニメーション中に適用されるスタイル。
開発者（Normal author declarations）：ウェブページの作者が設定した通常のスタイル。
ユーザー（Normal user declarations）：ユーザーが設定した通常のスタイル。
ユーザーエージェント（Normal user agent declarations）：ブラウザのユーザーエージェントによるデフォルトのスタイル。

文脈（Context）

スタイルはメディアクエリや他の条件により適用される場合があります。例えば、特定の画面サイズやデバイス向けに書かれたメディアクエリ内のスタイルは、その条件が満たされたときのみ適用されます。

@media (max-width: 600px) {
  .example {
    color: blue;
  }
}

要素に直接付加されたスタイル（Element Attached Styles）

HTML要素のstyle属性で定義されたインラインスタイルは、外部や内部のスタイルシートよりも優先されます。

<p style="color: red;">これは赤いテキストです。</p>

レイヤー（Layers）

CSSには、異なるレイヤーがあります。一般的には以下の順序でスタイルが適用されます：

ユーザーエージェントスタイルシート: ブラウザデフォルトのスタイル。
ユーザースタイルシート: ユーザーが定義したスタイル。
作者スタイルシート: ウェブページの作者が定義したスタイル。

CSSの詳細度（Specificity）

CSSの詳細度は、特定のスタイルがどの程度具体的であるかを示すもので、スタイルの優先順位を決定する重要な要素です。詳細度は (A, B, C) の形で表され、各値は以下のように決まります。

A: IDセレクタの数
B: クラスセレクタ、属性セレクタ、擬似クラスの数
C: 型セレクタと擬似要素の数
（ユニバーサル・セレクタを無視する）

詳細度の比較ルール

詳細度の比較は、以下のルールに従います。

A値の比較:
- 2つのA値が異なる場合、A値が大きい方がより特異的です。
B値の比較:
- A値が同じ場合、B値が大きい方がより特異的です。
C値の比較:
- A値とB値が同じ場合、C値が大きい方がより特異的です。
全ての値が同値の場合:
- 2つの詳細度は等しいとみなされます。

具体例

#header .nav > li a:hover /* (1, 2, 2) */
article p.intro /* (0, 1, 2) */

比較結果:
#header .nav > li a:hover の詳細度は (1, 2, 2) であり、article p.intro の特異性 (0, 1, 2) よりも高いため、より詳細度が高いです。

記述順（Order of Appearance）

同じ詳細度の場合、後に書かれたスタイルが優先されます。

.example {
  color: blue;
}
.example {
  color: red;
}

この場合、color: red;が適用されます。

まとめ

CSSのカスケードと詳細度を理解することは、Webページのスタイルを正しく適用するために非常に重要です。詳細度の計算方法とカスケードのルールをしっかり把握することで、複雑なスタイルシートを効果的に管理できるようになります。