CSSが効かないとき適用元を探す：色を変える前に上書きを確認する

カードの文字色を書き換えたのに、画面では前の色のまま。CSSが効かないとき適用元を探すには、変更したファイルを読み直すだけでなく、対象の要素にどの宣言が適用されているかを確認します。まず一つの要素、一つのプロパティに絞りましょう。

ここでは架空の版画展のカードを使います。色は例の違いを見分けるためのもので、サイト全体の配色案ではありません。幅や余白の問題はbox-sizingの比較のように、寸法の計算を別に調べます。

読み込まれていないのか、上書きされたのかを分ける

対象の文字を開発者ツールで選び、スタイル欄に自分のセレクターがあるかを探します。見つからなければ、CSSの読み込み先、クラス名、保存したファイルが合っているかを確認します。ここで詳細度を上げても、未読込や名前の違いは直りません。

規則が見つかったら、colorの宣言に取り消し線があるかを見ます。取り消し線がある場合は、別の宣言が優先されている可能性があります。計算済みのスタイル欄で最終的なcolorを確認し、その値の出所へたどると、調べる範囲を狭められます。画面や項目名はブラウザーにより異なります。

同じスタイルシート内で、二つの規則を比べる

次のHTMLとCSSを練習用ページへ置きます。例は同じスタイルシート内の通常の宣言だけで、レイヤー、インラインスタイル、importantは使っていません。

<section class="exhibit">
  <p class="caption">版画展の作品紹介</p>
</section>

.exhibit .caption { color: #293b59; }
.caption { color: #943c20; }

後に書いた茶色ではなく、最初の青色が適用される条件です。クラスを二つ含むセレクターの詳細度が、一つだけのものより高いためです。MDNの詳細度の説明では、詳細度を比較する前にもオリジンや重要度などの優先関係があることを確認できます。

「後に書いたものが必ず勝つ」と覚えず、今回のように条件をそろえて比較してください。同じ優先条件で詳細度も同じなら、後の宣言が優先されます。まず競合している二行を控え、何を比べているかを書き出します。

強い指定を追加する前に、変更範囲を決める

今回の展示内の説明文をすべて茶色にするなら、最初の規則の値を変更する方法があります。一枚だけを変えたい場合は、共通の規則を変えるとほかのカードにも影響します。先に「展示内全部」か「特定の一枚」かを決めましょう。

開発者ツールで最初の宣言を一時的に無効にし、後の色が現れるか確認するのも調査になります。ただし、その操作はソースファイルの修正ではありません。原因を確かめた後に編集元を直し、再読込して確認します。

理由が分からないままIDやimportantを足すと、次の変更で比較する規則が増えます。今回は追加せず、適用元と変更範囲を説明できるところまでを練習にします。

表示色と適用元の行を、変更前後で照合する

最初に表示色と適用元の行を記録し、最初の規則の色だけを変えます。再読込後、意図した宣言が適用されているかを見直してください。別のカードがあるなら、そこも同じ変更が必要だったか確認します。

最後に「どの規則が優先され、どこを直したか」を二文で書きます。無料レッスンの練習ページでも、値を当てずっぽうに増やす前に、この記録を一つ残すと次の調査の出発点になります。