CSS を直したのに見た目が変わらないとき、原因は大きく3つです。古いファイルが使われている（キャッシュ）、別の指定に負けている（優先度）、そもそも読み込まれていない。この順で見ると早く片付きます。

1. 古いファイルが使われていないか

キャッシュは何段にもなっています。手前から順に確認します。

• ブラウザ … スーパーリロード、またはシークレットウィンドウで開く
• WordPressのキャッシュプラグイン … 管理画面からキャッシュを削除
• サーバーのページキャッシュ … レンタルサーバーの管理画面で削除
• CDN … 配信側のキャッシュ削除（ここが残ると何をしても変わりません）

シークレットウィンドウで新しい表示になるならブラウザ側、それでも古いならサーバーかCDN側です。ここで切り分けられます。

訪問者の手元にも古いCSSが残ります。ファイル名の後ろに ?ver=20260911 のような文字を付けて、更新のたびに変えてください。これで全員に新しいファイルが渡ります。

2. 読み込まれているファイルを直接見る

ブラウザでページのソースを表示し、CSSファイルのURLを直接開きます。そこに自分が書いた内容が入っていなければ、編集したファイルと読み込まれているファイルが別物です。

• 子テーマではなく親テーマを編集していた
• ビルドが必要な構成で、元ファイルだけ直していた
• テスト環境を直していて、本番は別のファイルだった
• アップロード先のフォルダが違っていた

3. 別の指定に負けていないか

ファイルには届いているのに効かない場合は、優先度です。ブラウザの検証ツールで対象の要素を選ぶと、効いている指定と、取り消し線が付いた指定が見えます。取り消し線が付いていれば負けています。

• IDセレクタやインラインの style に負けている
• 相手が !important を使っている
• 後から読み込まれる別のCSSで上書きされている
• セレクタの書き間違いで、そもそもどの要素にも当たっていない

詳細度｜どちらが勝つかの決まり方

同じ要素に対して複数の指定があるとき、どれが採用されるかは詳細度（Specificity）で決まります。後から書いたほうが勝つと思われがちですが、実際には書いた順よりも詳細度が優先されます。

数え方は、セレクタの中に出てくる種類を数えるだけです。3つの桁で比べます。

• 1桁目（ID） … #main のようなIDセレクタの数
• 2桁目（クラス） … .btn のようなクラス、[type="text"] のような属性、:hover のような擬似クラスの数
• 3桁目（要素） … a や div のような要素名、::before のような擬似要素の数

上の桁が1つでも多ければ、下の桁がいくつあっても勝ちます。実例で並べると分かりやすくなります。

.btn                 → 0, 1, 0
a.btn                → 0, 1, 1
.card .btn           → 0, 2, 0
.card .inner a.btn   → 0, 2, 1
#main .btn           → 1, 1, 0  ← クラスを何個足しても勝てない
style="..." (インライン)  ← さらに強い

つまり .card .inner .box a.btn のようにクラスを4つ重ねても、相手が #main .btn であれば負けます。クラスを足して勝とうとするのは、ID が絡んでいる場合には無駄な作業です。

同じ詳細度なら、後に書いたほうが勝つ

桁がすべて同じ場合に限り、読み込み順で後に来たものが採用されます。テーマのCSSより後に自分のCSSを読み込ませる、というのはこの性質を使った調整です。逆に、プラグインのCSSが後から読み込まれていると、同じ詳細度では勝てません。

!important は詳細度の外にある

!important を付けた指定は、詳細度の比較より先に採用されます。ID でも勝てません。!important 同士がぶつかった場合は、その中で詳細度を比べます。

わざと弱くする書き方もある

:where() の中に書いたセレクタは、詳細度が 0 として数えられます。あとから上書きされる前提の初期スタイルを書くときに使えます。似た書き方の :is() は中身の詳細度を引き継ぐので、混同しないよう注意してください。

:where(.card) .ttl { color: #333; }  /* 0, 0, 0 … 上書きしやすい */
:is(.card) .ttl     { color: #333; }  /* 0, 2, 0 … 通常と同じ */

勝たせ方の順番

検証ツールで取り消し線の付いた指定を選ぶと、どのセレクタに負けているかが見えます。相手が分かったら、次の順で考えてください。

1. 同じ詳細度にして、自分のCSSを後に読み込ませる
2. 相手がIDで当てているなら、当てる場所（HTMLの構造やクラス）を見直す
3. それでも無理なら、相手と同じ詳細度に1つだけ足して上回る
4. !important は最後の手段にする

勝たせるために !important を足すのは最後の手段です。一度使うと、次に直す人はさらに強い指定を足すことになり、だんだん触れなくなります。まずは構造を見直して、当てる場所を変えられないか考えてください。

4. PHPを直したのに変わらない場合

CSSではなく PHP を直したのに変わらないときは、サーバー側で PHP をコンパイル済みの形で保持している（OPcache）ことがあります。ファイルは確かに新しいのに古い動きをする場合は、サーバーの再起動やキャッシュ削除が必要です。

触るたびに壊れる状態なら

!important が積み重なり、どこを直せば何が変わるのか分からない状態になっているサイトは少なくありません。当社ではCSSの整理や、オリジナルテーマへの作り直しを承っています。まずどこが原因か調べてほしいというご相談にも対応します。