デザインの編集をしている時にCSSを書いたのに何故かデザインが変わらないという事があると思います。
その原因の多くはCSSの詳細度（得点）とセレクタの書き方にあります。
詳細度の計算ルール
・基本的には、セレクタが具体的（限定的）であるほどスコアが高くなります。
CSSが効かない正体！「詳細度（特異性）」の点数ルール
各セレクタのスコアは下の表の通りになります。
| セレクタの種類 | 例 | スコア（目安） |
|---|---|---|
| 要素セレクタ | a, div, p | 1点 |
| クラスセレクタ | .link, .content | 10点 |
| IDセレクタ | #header | 100点 |
| インライン書き | style="..." | 1000点 |
各セレクタの点数
表を見てもらえば分かるように要素セレクタ、つまりタグが一番スコアが低いです。
一つのタグ a がそのページに基本一つしか存在しないIDセレクタである#headerに勝ちようがありません。
もちろんクラスセレクタ一つにも勝てません。
合計点が高い方が勝つ具体例シミュレーション
もっとも基本的な「タグ＋クラス」の組み合わせです。
ただのクラス指定よりも、どのタグのクラスかを詳しく書いた方が1点分強くなります。
- A：
.link-text（10点） - B：
a.link-text（11点：タグ1点 + クラス10点）
結果はBの勝ちです。
特定の場所にあるもの、と限定するパターンです。
クラスが2つ並ぶと20点になります。「どこのクラスか」を親要素から指定するだけで、一気に強度が倍になります。
- A：
.menu-item（10点） - B：
.main-nav .menu-item（20点：クラス10点 + クラス10点）
結果はBの勝ちです。
クラスを2つ並べると、100点のIDには届かなくても、テーマ側が書いている『タグ＋クラス（11点）』には余裕で勝てるようになります。これが上書きのコツです
タグをいくら並べてもクラス1つに勝てないパターンです。
どれだけタグを細かく並べても、クラス1つ（10点）には絶対に勝てません。
- A：
body div ul li a（5点：タグ5つ分） - B：
.my-link（10点：クラス1つ）
結果はBの勝ちです。
最強のIDクラスを10個並べても届かないパターンです。
ID（#）は1つで100点という別次元の強さを持っています。もしテーマ側がIDで指定していたら、クラスだけで戦うのは無謀だという話に繋げられます。
- A：
.container .content .inner .list .item .link（60点：クラス6個） - B：
#main-link（100点：ID 1つ）
結果はBの圧勝です。
点数ルールを無視する最強の必殺技「!important」
どんなに点数が低くても、末尾に !important をつけるだけで、ID（100点）すら一瞬でなぎ倒して最優先されます。
- A：
#header .nav a（111点） - B：
a { color: red !important; }
結果は圧倒的にBの勝ちです。
※使いすぎ注意
効果が強すぎて、後から修正したくなった時にさらに !important を重ねると大変面倒なことになります。ルール無視の最終手段だと思ってください。
WordPressではプラグインが勝手に当てているスタイルをどうやっても変えられない時だけ使う手段でもあります。
スペース一つで大違い！「中のもの」か「それ自体」か
CSSを書くとき、セレクタの間に「半角スペース」を入れるかどうかで、ターゲットが180度変わります。
パターン①：スペース「あり」＝ 子孫セレクタ（〜の中にある）
書き方：.info-list a
意味：.info-list という箱の中にある<a> タグ
<div class="info-list">
<a href="#">ターゲットはここ！</a>
</div>パターン②：スペース「なし」＝ 特定セレクタ（〜という名前の）
書き方： a.info-list
意味： <a> タグであり、かつ .info-list というクラス名がついている本人
<a href="#" class="info-list">ターゲットはここ！</a>WordPressでの使い方
- 「中のリンクを全部変えたい」とき
→ スペースあり（.entry-content aなど）
- 「特定のボタンだけピンポイントで変えたい」とき
→ スペースなし（a.is-style-buttonなど）
WordPressで「正しく書いたのに反映されない」時のチェックリスト
点数（詳細度）と書き方を理解しても、WPでは特有の理由でCSSが負けることがあります。反映されない時はこの2点を確認しましょう。
① テーマ側の点数（詳細度）に負けている
一番多い原因です。
- 書き込んだCSS：
.link-text(10点) - WPテーマのCSS：
.entry-content a(11点)
このように、テーマ側が「場所（親要素のクラス）」を含めて指定している場合、シンプルなクラス指定は点数で負けて無視されます。
→ 解決策： a.link-text や .entry-content .link-text と書いて、点数を競り勝たせましょう。
② 読み込み順（後出しジャンケン）で負けている
点数が全く同じ（同点）なら、「後に読み込まれた方」が優先されます。
- 原因： カスタムCSS（外観＞カスタマイズ）よりも、プラグインやテーマの独自のCSSが「後に」読み込まれている場合があります。
→ 解決策： CSSを記述する場所を変えるか、どうしても勝てない時だけ前述の !important を使用して優先順位を強制的に引き上げます。
反映されないストレスを卒業するために
- まずは
.class a（中身） かa.class（本人） か、HTML構造を正しく指定する。 - 反映されなければ、タグ名や親要素のクラスを追加して、点数をアップさせてみる。
- それでもダメなら、記述する順番やライバルの点数をデベロッパーツールで確認。最終手段として
!importantを検討する。
CSSが反映されない理由は、センスではなく「単純な算数（点数計算）」の仕業です。
このルールさえ知っていれば、もう画面の前で何時間も悩む必要はありません。次に「あれ？」と思ったときは、落ち着いて確認してみてください。
コメント