カスケードと詳細度を理解する

後から書いたCSSがいつも勝つわけではありません。適用候補からカスケードで宣言を選び、同じ条件で詳細度と記述順を比較します。継承との違いも確認します。

この単元で学ぶこと

詳細度を三成分で比較する
重要度・インライン・記述順を区別する
直接指定と継承を分けて読む

本文解説

一つの値を選ぶ仕組み同じ要素のcolorに複数の宣言が当たるとき、カスケードが優先する宣言を決めます。候補にはセレクタが一致し、メディア条件も成立する宣言だけが入ります。詳細度は比較の一段階であり、起源や重要度、レイヤーなどの違いを無視して最初に比べるものではありません。【前提】CSSは有効な宣言のみ。同じ文書の著者スタイル、レイヤーなし。特記以外は通常宣言で、アニメーション・トランジション・@scopeはない。各例は独立。

詳細度の三成分 IDセレクタの数、クラス・属性・疑似クラスの数、型・疑似要素の数を左から比べます。#main .note p は（1,1,1）、.card .note は（0,2,0）、pは（0,0,1）。十進数の足し算ではなく辞書順なので、クラスを多く並べてもID成分1を追い越しません。

同じ条件なら比較する <p id="msg" class="note"> に #msg{color:red} と .note{color:blue} が当たるなら、通常の同条件ではIDのredです。後から.noteを書いても詳細度差は覆りません。詳細度が同じ.note二つなら、同じ優先段階内で後に書いた宣言が選ばれます。

数えない記号全称セレクタ*や結合子の空白・>・+・~は詳細度を増やしません。section > .note は（0,1,1）。:hoverのような疑似クラスはクラス成分、::beforeは型成分です。カンマで区切ったセレクタ一覧を合計することもしません。

インラインとimportant style="color:green" の通常インライン宣言は、ここでの通常スタイル規則の詳細度より優先します。しかし著者CSSのcolor:red !importantは通常インラインに優先します。!importantをIDの点数へ加算するのではなく、重要度の段階を変えるものとして読みます。

継承は別の過程 colorなどは子へ継承しますが、親#panelのcolor:redを継承する子にp{color:blue}が直接当たれば子はblueです。親のID詳細度が子の直接指定と競争するわけではありません。marginのような通常継承しないプロパティもあります。

明示的なキーワード inheritは親の計算値を明示的に継承し、initialはプロパティの初期値を指定します。unsetは通常継承するプロパティならinherit、通常継承しないものならinitialとして働きます。inheritを付けたmarginも親の値を受け取るため、通常継承しないという性質と明示指定を区別します。

実装の確認手順まず開発者ツールで対象要素に一致する宣言と打消し線の理由を見ます。次に重要度とインラインの有無、同条件なら詳細度と順序を確認します。標準CSSの:where()は引数を含め詳細度0、:is()などには別規則もあるため、疑似クラスはすべて一律一点という一般化も避けます。

図解

重要ポイント

詳細度はID、クラス等、型等の順で比較する。
同じ条件・同じ詳細度なら後の宣言。
継承された値より対象への直接指定を先に決める。

間違えやすい点

!importantを詳細度の点数と考えない。
親の高詳細度が子の直接指定を押しのけると考えない。

用語解説

カスケード: 複数の宣言から優先する値を決める仕組み。
詳細度: セレクタの構成で決まる優先比較用の三成分。
継承: 特定プロパティの値を親から子へ引き継ぐ仕組み。

参考資料

教材データに登録された参考リンクです。リンク先の内容や更新日は提供元でご確認ください。

確認問題の出題・採点や学習履歴の保存にはログインが必要です。