カスケードと詳細度のブラウザ挙動/実装演習
ブラウザで色や余白が期待どおり変わらない原因を、候補・詳細度・継承の順に切り分けます。コードから計算し、どの宣言を直すかまで判断します。
この単元で学ぶこと
- 複数の競合規則の勝者を特定する
- inherit・initial・unsetを選ぶ
- 詳細度を不要に上げず修正する
本文解説
対象と規則 <div id="app"><p class="note hot">本文</p></div> に .note{color:red}、#app p{color:blue}、p.hot{color:green}をこの順で与えます。対象pには三つとも一致するので、詳細度を比較します。 【前提】CSSは有効な宣言のみ。同じ文書の著者スタイル、レイヤーなし。特記以外は通常宣言で、アニメーション・トランジション・@scopeはない。各例は独立。
勝つ宣言を計算 .noteは（0,1,0）、#app pは（1,0,1）、p.hotは（0,1,1）です。ID成分が高い#app pのblueが選ばれます。最後にgreenを書いた事実だけでは勝てません。修正では意図せず広く強く指定している#app p自体を見直す方法があります。
同じ詳細度なら順序 .note.hot と p.note:hoverはそれぞれ（0,2,0）、（0,2,1）で同じではありません。一方 .note.hot と .panel .noteは（0,2,0）同士なので、両方一致し同じ条件なら後の規則です。空白やクラスの文字数は点数を増やしません。
インラインと重要宣言 対象へstyle="color:purple"を加えると通常規則より優先しますが、.note{color:orange!important}があればorangeです。さらに同じ要素のインラインがcolor:purple!importantなら、その著者重要宣言が優先します。重要宣言を増やす前に既存の意図を調べます。
継承の修正 親にcolor:red、子にcolor:blueがあるとき、子を親と同じ色へ戻す意図なら子の宣言をcolor:inheritへ変更できます。color:initialは親のredを指定する意味ではありません。margin-leftを親に合わせる場合も明示inheritが必要で、unsetなら通常の初期値へ戻ります。
条件が外れた規則 メディアクエリが成立しない規則や、セレクタが対象へ一致しない規則は、詳細度が高くても候補に入りません。#other pと#app pを見間違える場合もあります。開発者ツールの一致規則一覧と要素の実際のid/classを照合します。
新しいセレクタの補足 :where(#app) .noteは（0,1,0）で、:where内のIDは加算されません。:is(#app,.panel) .noteは（1,1,0）です。:isの引数一覧の最大詳細度を使うため、単純に「一致したclassだけ」とは数えません。これらは基本ルールを補う標準CSSの挙動として確認します。
実装課題の答え 一般カード.noteの通常色をblue、.note.warningだけredにしたいなら、.note{color:blue}と.note.warning{color:red}で表せます。IDや!importantを増やさなくても状態クラスで区別できます。実際の計算値と意図を確認し、他のカードにも赤が漏れていないかを見ます。
図解
重要ポイント
- まず一致する候補か確認し、それから詳細度を比べる。
- 同詳細度かどうかを三成分で確かめる。
- inheritとinitialとunsetの目的を分ける。
間違えやすい点
- 最後のルールだから優先とは限らない。
- 重要宣言を修正のたびに増やすと原因を追いにくくなる。
用語解説
- 計算値
- カスケードや継承などを解決して得られるプロパティ値。
- 状態クラス
- warningなど、要素の状態に応じて付けるclass。
関連教材
参考資料
教材データに登録された参考リンクです。リンク先の内容や更新日は提供元でご確認ください。
確認問題の出題・採点や学習履歴の保存にはログインが必要です。