はじめに

CSSでスタイルが競合することがある。たとえば単純な例だが、 <span class="title">というタグがあって下のようなルールが合った場合。

#cover {
  margin: 1rem;
}

span {
  font-size: 12px;
}

.title {
  color: red;
}

span.title {
  font-size: 24px;
}

この場合、フォントサイズが競合している。このような競合を解決するためにルールがどのようになっているのか。興味が湧いたので調査した。

MDNのドキュメント

ドキュメント化されているが、調べてみると意外と分かりづらかったため理解を深めるべくまとめた。

今回は大枠の部分を記載し、詳細は別途記事として投稿する。

CSSにおけるカスケードとは？

CSSで複数のスタイルが競合した時に、どのスタイルが最終的に適用されるかを決める仕組みのこと。冒頭に挙げた例のようにフォントサイズが競合している場合、最終的にどのフォントサイズが適用されるのか。これを決めるルールが明確に決まっている。

CSSの適用アルゴリズムは「フィルタリング」「優先順位の比較」の順番で行われるため、その順番に沿って記載する。

フィルタリング

オリジン

CSSの出どころは大きく分けて次の3通り。

ブラウザ標準スタイル
- 各ブラウザに内蔵されているデフォルトのスタイル
ユーザースタイル
- ブラウザの機能や拡張機能でユーザーが独自のCSS設定を追加することができる
開発者スタイル
- 開発者が書いたCSS

関連性

スタイルを適用する際、まずはフィルタリングから行われる。オリジンからすべてのルールをピックアップし、該当の要素に適用されないルールは除外される。

冒頭に挙げた単純な例を再度見る。
<span class="title">というタグがあって下のようなルールが合った場合。

#cover { /* 除外 */
  margin: 1rem;
}

span { /* 適用候補 */
  font-size: 12px;
}

.title { /* 適用候補 */
  color: red;
}

span.title { /* 適用候補 */
  font-size: 24px;
}

この場合、#coverは適用外となりその他のルールは適用候補となる。

これら候補のなかで最終的に適用されるのはどれか。次の優先順位によって決まる。

優先順位

次の1から5があり、優劣が決まるまで順番に比較する。

1. オリジンと重要度

優先順位が高い → 低い順に。

CSS トランジション
ブラウザ標準スタイル (!important)
ユーザースタイル (!important)
開発者スタイル (!important)
キーフレームアニメーション
開発者スタイル（通常）
ユーザースタイル（通常）
ブラウザ標準スタイル（通常）

「通常」と書いたものは!importantと付かないスタイルのこと。直感通りではあるが!importantと付いている方が優先順位が高い。

注意1. CSSトランジッションは!importantよりも優先順位が高い。

注意2. !importantと通常時で、ブラウザ標準スタイル、ユーザースタイル、開発者スタイルの順番が逆転している点に注意。

2. カスケードレイヤー

カスケードレイヤーとはCSSのスタイル適用順序をより細かく制御するために導入された、比較的新しいしくみ。

CSS内に@layerを書くことでレイヤーを定義できるが、このレイヤーを見ることで優先順位を決める。

3. 詳細度

詳細度はCSSに記述されたセレクタによって決まる。
詳細度は「A-B-C」という3つの数値で表され、それぞれ以下のような意味がある。

A: IDセレクタ( #id )の数
B: クラス（.class）、属性（[attr]）、疑似クラス（:hoverなど）の数
C: 要素型（divなど）と疑似要素（::beforeなど）の数

この「A-B-C」によって優先順位を決める。

インラインスタイル

インラインスタイルは詳細度のルールに含まれるが、カスケードレイヤーとセットで考えないといけないの注意。

4. スコープ近接性

CSS内に@scopeを書くことでスコープを定義することができる。
このスコープにおける近さを比較することで優先順位を決める。

5. 記述順

ここまで比較して優先順位が同じであれば、もっとも後に書いたスタイルが適用される。

次回の記事から「カスケードレイヤー」「詳細度」「スコープ近接性」について記述する。