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

CSSを書いたのに、色や余白が変わらない。WordPressのデザインを調整していると、CSSが思ったとおりに反映されないことがあります。

原因はキャッシュだけではありません。セレクタが目的の要素に一致していない、テーマ側のCSSに優先順位で負けている、別のCSSによってあとから上書きされているなど、複数の可能性があります。

その切り分けに必要なのが、CSSの詳細度とセレクタの読み方です。

この記事では、CSSの詳細度を比べる基本と、間違えやすい.class aとa.classの違い、WordPressでCSSが反映されないときに確認したい項目を整理します。

CSSが反映されない原因は詳細度だけではありません。最初にセレクタが対象の要素に一致しているかを確認し、そのあとで詳細度や読み込み順を調べます。

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

同じ要素の同じプロパティに、複数のCSSが指定されることがあります。

a {
  color: blue;
}

.entry-content a {
  color: red;
}

どちらもリンクの文字色を指定していますが、同じ条件で競合した場合は、.entry-content aの赤が優先されます。

aはすべてのリンクを対象にしています。一方、.entry-content aは「entry-contentクラスを持つ要素の中にあるリンク」まで対象を絞っています。

このように、競合するCSSのどちらを採用するか判断するために使われるセレクタの重みが詳細度です。

詳細度だけで、すべてのCSSの優先順位が決まるわけではありません。CSSの出所、!importantの有無、カスケードレイヤーなどが先に判定され、同じ条件で競合したCSSの間で詳細度が比較されます。

詳細度は3つの列で比較する

詳細度は、次の3種類を別々の列として数えます。

この記事では、左から「ID－クラス－要素」の順で表します。

• a：0-0-1
• .link：0-1-0
• a.link：0-1-1
• #main：1-0-0

比較するときは、最初にIDの列を見ます。IDの数が同じならクラスの列、それも同じなら要素の列を比べます。

そのため、クラスを何個並べても、IDの列へ桁上がりすることはありません。

「要素は1点、クラスは10点、IDは100点」という考え方は、最初の目安にはなります。ただし、実際には足し算ではなく、ID・クラス・要素の列を左から順番に比較します。

セレクタの詳細度を比べてみる

よく使うセレクタを例に、詳細度の違いを確認します。

クラスだけより、要素とクラスを組み合わせた方が強い

• .link-text：0-1-0
• a.link-text：0-1-1

どちらもクラスは1つですが、a.link-textには要素セレクタのaが含まれています。

クラスの列が同じなので、次に要素の列を比較し、a.link-textの方が高い詳細度になります。

親要素のクラスを加えると詳細度が上がる

• .menu-item：0-1-0
• .main-nav .menu-item：0-2-0

.main-nav .menu-itemは、「main-navクラスを持つ要素の中にあるmenu-itemクラス」を対象にしています。

適用する場所を絞りながら、テーマ側の.menu-itemよりも詳細度を上げられます。

親要素を追加する方法は、適用範囲を限定したい場合に有効です。ただし、上書きするためだけに親要素を何個も並べると、あとから変更しにくいCSSになります。

要素を並べてもクラスには勝てない

• body div ul li a：0-0-5
• .my-link：0-1-0

最初にIDの列を比べると、どちらも0です。次にクラスの列を見ると、.my-linkだけが1になっています。

この時点で.my-linkが優先されるため、要素セレクタが5個あるかどうかは結果に影響しません。

IDセレクタはクラスより強い

• .container .content .inner .list .item .link：0-6-0
• #main-link：1-0-0

#main-linkにはIDセレクタが1つあります。IDの列で差が付くため、クラスが6個並んだセレクタよりも高い詳細度になります。

IDを使ったCSSをクラスだけで上書きしようとしても、詳細度では勝てません。

.class aとa.classは対象が違う

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

.class aとa.classは詳細度だけを見ると、どちらも0-1-1です。しかし、指定している対象はまったく異なります。

.class aはクラスの中にあるa要素

.info-list aは、info-listクラスを持つ要素の中にある、すべてのa要素を指定します。

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

.info-list a {
  color: red;
}

半角スペースは、前の要素の中にある子孫要素を指定するための結合子です。

a要素が.info-listの直接の子要素でなくても、さらに内側に含まれていれば対象になります。

a.classはそのクラスを持つa要素

a.info-listは、a要素であり、同時にinfo-listクラスを持っている要素を指定します。

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

a.info-list {
  color: red;
}

半角スペースがないため、aと.info-listの両方の条件に一致する同じ要素を探します。

.info-list aは「info-listの中にあるリンク」、a.info-listは「info-listクラスが付いたリンク本人」です。詳細度は同じでも、対象となるHTML構造が違います。

直接の子要素だけを指定する場合

.info-listの直下にあるリンクだけを指定したい場合は、子結合子の>を使います。

.info-list > a {
  color: red;
}

この指定では、さらに内側の要素に入っているリンクは対象になりません。

詳細度を上げても反映されない場合がある

セレクタの詳細度を上げれば、必ずCSSが反映されるわけではありません。

そもそもセレクタが対象のHTMLに一致していなければ、詳細度がどれだけ高くてもCSSは適用されません。

<a href="#" class="info-link">リンク</a>

このHTMLに対して、次のCSSは一致しません。

.info-link a {
  color: red;
}

.info-link aは、info-linkクラスを持つ要素の中にあるリンクを探す指定です。

実際のHTMLでは、リンク本人にinfo-linkクラスが付いています。この場合は、次のように指定します。

a.info-link {
  color: red;
}

クラスだけで対象を指定できる場合は、次の書き方でも一致します。

.info-link {
  color: red;
}

CSSがまったく適用されていない場合は、詳細度より先に、書いたセレクタが実際のHTML要素に一致しているかを確認します。

WordPressのbodyクラスで適用範囲を絞る

WordPressテーマがbody_class()を使用している場合、ページの種類やログイン状態などに応じたクラスがbody要素へ出力されます。

このクラスをセレクタへ加えると、投稿ページ、固定ページ、特定の記事などにCSSの適用範囲を絞れます。

たとえば、投稿ページの本文内にあるリンクだけを指定する場合は、次のような書き方ができます。

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

この例では、「個別投稿の中にあるentry-contentクラス内のリンク」を指定しています。

固定ページだけに適用する場合は、.singleではなく.pageを使います。

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

特定の投稿だけを変更する場合は、.postid-123のようなクラスを使います。

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

数字の部分は投稿ごとに異なります。実際のページに出力されているbodyクラスを確認して指定します。

.entry-contentは例として使用しているクラスです。本文エリアのクラス名はテーマによって異なるため、使用中のテーマが実際に出力しているHTMLを確認してください。

デベロッパーツールで原因を確認する

CSSが反映されない原因は、ブラウザのデベロッパーツールを使うと確認しやすくなります。

Chromeなどのブラウザでは、調べたい場所を右クリックして「検証」を選ぶと、対象要素のHTMLと適用されているCSSを確認できます。

1. 変更したい要素を右クリックして「検証」を開く
2. 選択されているHTML要素とクラス名を確認する
3. 自分が書いたCSSがスタイル欄に表示されているか確認する
4. プロパティに取り消し線が付いていないか確認する
5. 同じプロパティを上書きしているCSSを確認する
6. どのCSSファイルの何行目から読み込まれているか確認する

書いたCSS自体がスタイル欄に表示されない場合は、セレクタが一致していない、CSSファイルが読み込まれていない、メディアクエリの条件外になっているなどの可能性があります。

CSSは表示されているもののプロパティに取り消し線が付いている場合は、別の指定に上書きされています。詳細度、!important、読み込み順などを確認します。

デベロッパーツールで自分のCSSが表示されているかを見ると、「届いていない」のか「届いているが負けている」のかを切り分けられます。

詳細度が同じなら後のCSSが優先される

同じ詳細度のCSSが、同じ要素とプロパティに指定されている場合は、基本的にあとから読み込まれた指定が優先されます。

.info-link {
  color: blue;
}

.info-link {
  color: red;
}

どちらも詳細度は0-1-0です。この場合は、あとに書かれた赤が適用されます。

WordPressでは、テーマ、プラグイン、ブロック、追加CSSなど、複数の場所からスタイルが読み込まれます。

自分のCSSよりあとに、同じ詳細度のテーマやプラグインのCSSが読み込まれていれば、あとから上書きされることがあります。

!importantは通常の詳細度より先に判定される

!importantを付けた宣言は、通常の宣言よりも優先されます。

a {
  color: red !important;
}

通常のCSSと!important付きのCSSが競合した場合は、セレクタの詳細度が低くても、!important付きの宣言が優先されます。

ただし、!important同士が競合する場合は、その中で詳細度や読み込み順が比較されます。

!importantを使い続けると、あとから上書きするために別の!importantが必要になり、優先関係を追いにくくなります。

!importantを付ける前に、セレクタが正しいか、どのCSSに上書きされているか、読み込み順を変更できないかを確認します。

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

CSSが反映されないときは、次の順番で確認すると原因を切り分けやすくなります。

1. CSSの括弧、コロン、セミコロンなどに記述ミスがないか確認する
2. 指定したクラス名やIDが実際のHTMLと一致しているか確認する
3. .class aとa.classを間違えていないか確認する
4. 自分のCSSがデベロッパーツールに表示されているか確認する
5. 別のCSSに上書きされ、取り消し線が付いていないか確認する
6. 詳細度、!important、読み込み順を確認する
7. メディアクエリの画面幅や条件が一致しているか確認する
8. 指定したプロパティや値が有効か確認する
9. 編集したCSSファイルが対象ページで読み込まれているか確認する
10. ブラウザ、テーマ、プラグイン、サーバー側のキャッシュを確認する

キャッシュを削除する前にデベロッパーツールを見ると、現在ブラウザへ読み込まれているCSSを確認できます。

CSS自体が届いていないのか、届いているものの別の指定に負けているのかを確認してから対処した方が、原因を特定しやすくなります。

まとめ｜対象と優先順位を分けて確認する

CSSが反映されないときは、最初から詳細度を上げればよいわけではありません。

まず、書いたセレクタが目的のHTML要素に一致しているかを確認します。特に、.class aとa.classは詳細度が同じでも、対象となる要素が異なります。

• .class aは、クラスを持つ要素の中にあるリンク
• a.classは、そのクラスを持つリンク本人
• 詳細度は、ID・クラス・要素を別の列として比較する
• 詳細度が同じ場合は、基本的にあとから読み込まれたCSSが優先される
• デベロッパーツールで、CSSが届いているか、上書きされているかを確認する

CSSが反映されない原因を探すときは、「対象に一致しているか」と「優先順位で負けていないか」を分けて考えます。

!importantを追加する前に、HTML構造、セレクタ、詳細度、読み込み順を順番に確認することが、あとから管理しやすいCSSにつながります。