CSSが反映されない原因を探す｜詳細度と .class a / a.class の違い

CSSを書いたのに、なぜか反映されない。
WordPressでデザインを調整していると、かなりよく出会う悩みです。

コードは間違っていないはずなのに、色が変わらない。余白が変わらない。ボタンの見た目が思った通りにならない。
その原因のひとつが、CSSの詳細度（特異性）です。

詳細度とは、簡単に言えば「どのCSSを優先するか」を決めるための強さです。
同じ要素の同じプロパティに複数のCSSが当たっている場合、ブラウザは詳細度や読み込み順を見て、どの指定を使うか判断します。

この記事では、CSSの詳細度を「点数の目安」として見ながら、なぜCSSが反映されないのか、どう書けば狙った場所に届きやすいのかを整理します。

CSSが反映されない原因のひとつが「詳細度」

CSSでは、同じ要素に複数の指定が当たることがあります。

a {
  color: blue;
}

.entry-content a {
  color: red;
}

この場合、どちらもリンク文字の色を指定しています。
けれど、実際に優先されるのは .entry-content a の方です。

理由は、a だけの指定よりも、.entry-content a の方が「どこのリンクなのか」を具体的に指定しているからです。

詳細度の点数ルールをざっくり見る

詳細度は、本来は単純な足し算だけで決まるものではありません。
ただ、最初に理解するための目安としては、「要素よりクラスが強い」「クラスよりIDが強い」と考えると分かりやすいです。

要素セレクタは弱く、クラスセレクタはそれより強く、IDセレクタはさらに強くなります。

WordPressでCSSが効かないときは、自分が書いたCSSよりも、テーマやプラグイン側のCSSの方が具体的に書かれていて、詳細度で負けていることがあります。

詳細度を比べてみる

ここからは、よくあるセレクタの組み合わせを見ながら、どちらが優先されやすいかを確認していきます。

クラスだけより、タグ＋クラスの方が少し強い

• .link-text：クラス1つなので約10点
• a.link-text：要素1つ＋クラス1つなので約11点

この場合は、a.link-text の方が少し詳細度が高くなります。

つまり、同じ .link-text を指定していても、a.link-text のように「aタグであり、link-textクラスを持つもの」と書いた方が、少しだけ具体的な指定になります。

親要素のクラスを足すと、さらに具体的になる

• .menu-item：クラス1つなので約10点
• .main-nav .menu-item：クラス2つなので約20点

.main-nav .menu-item は、「main-nav の中にある menu-item」という指定です。

ただの .menu-item よりも場所を絞っているため、テーマ側のCSSを上書きしたいときに使いやすい書き方です。

WordPressでは、テーマ側が .entry-content a のように親要素を含めて指定していることがあります。自分のCSSが効かないときは、同じように親要素のクラスを足すと反映される場合があります。

タグをたくさん並べても、クラス1つに届かないことがある

• body div ul li a：要素5つなので約5点
• .my-link：クラス1つなので約10点

この場合は、.my-link の方が優先されやすくなります。

タグを細かく並べるよりも、クラスを使って狙った場所を指定する方が、CSSでは強く扱われます。

IDセレクタはかなり強い

• .container .content .inner .list .item .link：クラス6つなので約60点
• #main-link：ID1つなので約100点

この場合は、#main-link の方が優先されやすくなります。

IDセレクタは強い指定です。
テーマやプラグイン側がIDを使っている場合、クラスだけで上書きしようとしても反映されにくいことがあります。

.class a と a.class は意味が違う

CSSでよく間違いやすいのが、半角スペースの有無です。

.class a と a.class は、見た目は似ていますが、指定している対象がまったく違います。

.class a は「中にある aタグ」

.info-list a は、.info-list の中にある a タグを指定します。

<div class="info-list">
  <a href="#">このリンクが対象</a>
</div>

.info-list a {
  color: red;
}

この書き方は、「特定の箱の中にあるリンクだけ変えたい」ときに使います。

a.class は「そのクラスを持つ aタグ本人」

a.info-list は、a タグであり、さらに info-list というクラスを持つ要素を指定します。

<a href="#" class="info-list">このリンク本人が対象</a>

a.info-list {
  color: red;
}

この書き方は、「そのクラスが付いているリンクそのものを変えたい」ときに使います。

半角スペースがあると「中にあるもの」。半角スペースがないと「その要素本人」です。ここを間違えると、CSSがまったく別の場所を見に行ってしまいます。

WordPressで使いやすいセレクタ

WordPressでは、テーマが body_class() を出力している場合、ページの種類や状態に応じて body タグにさまざまなクラスが付きます。

これを使うと、「投稿ページだけ」「固定ページだけ」「特定の記事だけ」のように、CSSの適用範囲をかなり絞れます。

たとえば、投稿ページの本文内リンクだけ色を変えたいなら、次のように書けます。

.single .entry-content a {
  color: #43577a;
}

この指定は、「投稿ページの中にある本文エリアのリンク」を狙っています。

固定ページだけに当てたいなら、.single ではなく .page を使います。

.page .entry-content a {
  color: #43577a;
}

特定の記事だけ変えたい場合は、.postid-123 のようなクラスを使います。数字の部分は記事ごとに変わるので、実際のページの body クラスを確認してください。

WordPressの body クラスは、ブラウザのデベロッパーツールで確認できます。ページごとに付いているクラスが違うため、狙ったページだけCSSを当てたいときに便利です。

!important は最終手段として考える

CSSが反映されないとき、!important を付けると通常の指定より優先されやすくなります。

a {
  color: red !important;
}

ただし、これは便利な反面、使いすぎると後から修正しづらくなります。

別のCSSで上書きしたくなったときに、さらに !important を重ねることになり、どこで何が優先されているのか分かりにくくなるからです。

!important は、詳細度や読み込み順を確認してもどうしても上書きできないときの最終手段として考えるのが安全です。

CSSが反映されないときのチェックリスト

CSSが効かないときは、いきなり !important を付ける前に、次の順番で確認すると原因を見つけやすくなります。

1. セレクタの書き方が合っているか確認する
2. .class a と a.class を間違えていないか確認する
3. テーマ側のCSSより詳細度が低くないか確認する
4. 同じ詳細度なら、後から読み込まれたCSSが優先されていないか確認する
5. ブラウザやサーバー、テーマのキャッシュが残っていないか確認する
6. どうしても上書きできない場合だけ !important を検討する

WordPressでは、テーマ、プラグイン、ブロックエディター、カスタムCSSなど、複数の場所からCSSが読み込まれます。
そのため、書いたCSSが間違っていなくても、詳細度や読み込み順で負けていることがあります。

まとめ｜CSSが反映されないときは、まず詳細度を見る

CSSが反映されない理由は、センスや勘の問題ではありません。
多くの場合、セレクタの書き方、詳細度、読み込み順、キャッシュのどこかに原因があります。

まずは、どの要素にCSSを当てたいのかを確認します。
次に、.class a なのか a.class なのか、親要素を含める必要があるのかを見ます。

それでも反映されない場合は、テーマ側のCSSの方が強くないか、デベロッパーツールで確認してみてください。

!important に頼る前に、セレクタの対象、詳細度、読み込み順を確認する。この順番で見直せるようになると、後から直しやすいCSSになります。